style.width、clientWidth、offsetWidth

_洋

已于 2022-04-11 15:37:14 修改

阅读量213

点赞数

分类专栏： JavaScript 文章标签： css3

于 2022-04-11 15:36:53 首次发布

本文链接：https://blog.csdn.net/mantou_riji/article/details/124100121

版权

JavaScript 专栏收录该内容

52 篇文章 7 订阅

订阅专栏

该博客探讨了CSS中的样式属性与DOM元素尺寸之间的关系。通过示例代码展示了`style.width`、`clientWidth`和`offsetWidth`这三个属性如何分别表示内容宽度、包含内边距的宽度及包含边框的完整宽度。文章揭示了这些属性在网页布局和动态计算元素尺寸时的重要性。

摘要由CSDN通过智能技术生成

先演示再说结论：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: coral; 
            padding:10px;
            border:10px red solid;
       }
    </style>
    <script>
        window.onload = function(){
            var box1 = document.getElementById("box1");
            alert("hello");
            console.log(box1.style.width);
            console.log(box1.clientWidth);
            console.log(box1.offsetWidth);
            console.log(box1.width);
        }
    </script>
</head>
<body>
    <div id="box1" style="width: 100px;height: 100px;"></div>
    
</body>
</html>

输出：
在这里插入图片描述
说明如下内容，三个属性表示的位置：

即：
style.width = content的width
clientWidth = width + padding-left + padding-right
offsetWidth = width + padding-left + padding-right +border-left +border-right