首页 > 代码库 > js你真的了解offsetWidth吗

js你真的了解offsetWidth吗

2024-07-13 16:33:54   234人阅读

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

 

示例：让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

 

完整代码，如下

<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>


联系
我们