DOM元素的移动

有如下代码：

<style>
#myelement {
  position: absolute;
  left: 50px;
  top: 100px;
}
</style>

<div id="myelement">This is my element</div>

<script>
var xpos = document.getElementById('myelement').style.left;
document.write(xpos); //显示空白
</script>

在变量是什么值时会在页面中显示空白呢？可以用下面的脚本测试一下：

<script>
var a = null;
var b = "";
var c; //默认是undefined
document.write(a, "<br>"); //null
document.write(b, "<br>"); //空白
document.write(c); //undefined
</script>

原来xpos的值是一个空字符串，这是因为document.getElementById('myelement').style.left获取的是内联样式中的left设置，而不是内部样式表中的left设置。将代码修改如下：

<style>
#myelement {
  position: absolute;
  top: 100px;
}
</style>