JavaScript border与offsetWidth

最新推荐文章于 2024-08-20 14:34:45 发布

原创最新推荐文章于 2024-08-20 14:34:45 发布 · 397 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端学习同时被 2 个专栏收录

10 篇文章

订阅专栏

javascript

9 篇文章

订阅专栏

本文探讨了一个关于CSS布局的问题：当使用JavaScript动态调整元素宽度时，为何加入边框后元素的实际宽度会增加而非减少。文章详细解释了style.width与offsetWidth的区别，并提供了获取元素实际宽度的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
#div1{
    width:200px;
    height:200px;
    background:#f00;
    border:1px solid #000;
}
</style>
<script>
window.onload = function(){
    startMove();
}
function startMove(){
    var oDiv = document.getElementById('div1');
    oDiv.style.width = oDiv.offsetWidth - 1 + 'px';
</script>

<div id="div1"></div>

为什么在样式中加了border之后方块会不断变宽而不是变窄？

style.width : width
offsetWidth : style.width + padding + border
随着时间的变化，可以列出这样一个表格：

    style.width        border     offsetWidth
①       200              2         202(200+2)
②       201(202-1)       2         203(201+2)
②       202(203-1)       2         204(202+2)
            …………………………………………

可以看出offsetWidth是不断增大的
1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。

2.offsetWidth属性仅是可读属性，而style.width是可读写的。

3.offsetWidth属性返回值是整数，而style.width的返回值是字符串。

4.style.width仅能返回以style方式定义的内部样式表的width属性值。

如何获取style行内样式（而不把style写在行内样式里）？
（这问题表达不清楚= =）

function getStyle(obj,attr){
    if(obj.currentStyle){       //IE
        return obj.currentStyle[attr];
    }else{                                  //其他浏览器
        return getComputedStyle(obj,false)[attr];
    }
}