offsetWidth相关js属性

Posted 王维璋

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了offsetWidth相关js属性相关的知识,希望对你有一定的参考价值。

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>
技术分享

以上是关于offsetWidth相关js属性的主要内容,如果未能解决你的问题,请参考以下文章

如何在角度 4 中使用诸如“offsetWidth”之类的 JS 属性

Google Maps JS Api:无法读取 null 的属性“offsetwidth”[重复]

AJAX相关JS代码片段和部分浏览器模型

JS实现图片无缝滚动特效;附addEventListener()方法offsetLeft和offsetWidth属性。

JS中clientWidth,offsetWidth,scrollTop等含义

关于offsetWidth innerWidth的使用