offsetWidth相关js属性 js你真的了解offsetWidth吗
offsetWidth是什么？
答：它可以获取物体宽度的数值
那么就只是这样吗！
html部分
<div id="div1"></div>
<style>#div1 { width:200px; height:200px; border:1px solid red; padding:2px; margin:2px; background:green;}</style> |
请看上面的html，你知道div1的offsetWidth是多少吗？
是不是200啊
哈哈，错了
div1的offsetWidth是206
为什么?
答：offsetWidth实际获取的是盒模型(width+border + padding)
200+2+4=206
扩展：那么offsetLeft和offsetTop呢
答： offsetLeft = left + marginLeft
offsetTop = top +marginTop
示例：让div变窄
现象：onmouseover时，div变窄
原理：
oDiv.style.width = oDiv.offsetWidth – 1 + “px”;
js部分
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function(){
document.title = oDiv.offsetWidth;
setInterval(function(){
oDiv.style.width = oDiv.offsetWidth - 1 + "px";
},30);
}
}
</script>
运行上面示例后，你会发现一个奇怪的现象:
div在变宽
我们不是要div变窄的吗！它怎么越来越宽了呢？
那么这个问题，怎么解决呢？
解决方式：
用oDiv.style.width = parseInt(oDiv.style.width) – 1 + “px”;
但是发现，onmouseover时，div它不动呢？
原因：oDiv.style.width，它只能获取行间的样式
所以需要调整成
<div id=”div1″ style=”width:200px;”></div>
其实，我们还可以写成一个通用的方法，可以获取任意一个样式
方法：function getStyle(obj,name)
注意：此时样式可以不是行间样式，也能获取
知识点：
IE写法：currentStyle
非IE写法: getComputedStyle
完整代码，如下
|
1
2
3
4
5
|
<div id="div1"></div>
<style>#div1 { width:200px; height:200px; border:1px solid red; padding:2px; margin:2px; background:green;}</style> |
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function(){
document.title = oDiv.offsetWidth;
setInterval(function(){
//oDiv.style.width = oDiv.offsetWidth - 1 + "px";
//oDiv.style.width = parseInt(oDiv.style.width) - 1 + "px";
oDiv.style.width = parseInt(getStyle(oDiv,"width"))- 1 + "px";
},30);
}
}
//获取行间任意样式
function getStyle(obj,name){
if(obj.currentStyle){ //IE
return obj.currentStyle[name];
} else {
return getComputedStyle(obj,false)[name]; //非IE
}
}
</script>
版权声明：本文为wangweizhang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。