先来看一段demo
<style>
div{
position:absolute;
left: 10px;
background: red;
width: 100px;
height: 100px;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementsByTagName("div")[0];
alert(oDiv.style.left);
}
</script>
<body>
<div></div>
</body>
FF下的显示效果
会发现 明明在css样式中设置了left属性 但是获取到的值为空
解决方案：
①将css的left属性改到行间样式中，即HTML内
<body>
<div style="left:10px"></div>
</body>
会发现是可以直接获取到left属性的值的
②可以使用currentStyle(IE Opera) getComputedStyle(FF Chrome)来获取到我们想要的属性值
<script> window.onload = function () { var oDiv = document.getElementsByTagName("div")[0]; alert(getStyle(oDiv,'left')); }; function getStyle(obj,attr) { if(typeof getComputedStyle) return getComputedStyle(obj,null)[attr]; else return obj.currentStyle[attr]; } </script>
最后来说一下问题的原因所在：
obj.style获取的是DOM元素CSS样式的声明对象简值。obj.style可读可写，所以我们会发现这样一个问题，当我们在JS代码中没有写obj.style之前去读obj.style也就是上面所发生的情况，会弹出一个空值，style只能获取到内联样式的具体值，而内部和外部样式无法获取到具体值。所以如果要获取CSS对象属性值，请使用currentStyle和getComputedStyle,但是currentStyle和getComputedStyle是只读的，所以修改CSS样式还是要用style来修改。