1. 问题引入
<head>
<style>
#div1{
width:150px;
height:200px;
position:absolute;
left:-150px;
background: green;
}
</style>
<script>
window.onload = function(){
var oDiv1 = document.getElementById(‘div1‘);
alert(oDiv1.style.left); //获取left属性的值
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
上面代码的意思是想要获取得到id="div1"元素的left属性值。但是当我们运行上面代码的时候就会发现，弹窗弹出的内容确实什么都没有。
我们明明在<style></style>标签内定义了该元素的left属性，为什么alert(oDiv.style.left);确实返回一个什么都没有的弹窗呢？
其实，这个问题的原因是：oDiv1.style.left这样的格式来获取的left是非行间样式的left。
2. 什么是非行间样式？
非行间样式就是指不是写在标签体内的style属性的样式。如上面的代码中<style>....</style>内的定义的样式都是非行间样式。
3. 那什么是行间样式？
行间样式就是写在标签体内的样式：如，<div style="left:100px">，在这里left样式就是行间样式。
4. 那我们该如何获取行间样式呢？
要获取行间样式我们可以这样操作：
低版本ie浏览器下使用oDiv1.currentStyle.left;进行获取非行间样式。
其它浏览器下使用var style = window.getComputedStyle(oDiv1,null); //第二个参数直接传入null就行，没什么作用的。
alert(style.left); //便可以返回行间样式的left属性值
5. 整合在一起，兼容所有浏览器的代码：
window.onload = function(){
var oDiv1 = document.getElementById(‘div1‘);
if(oDiv1.currentStyle){
alert(oDiv1.currentStyle.left);
}else{
alert(getComputedStyle(oDiv1,null).left);
}
}
时间： 2024-10-29 19:10:04