CSS盒模型与style.width,offsetWidth,clientWidth的关系

最新推荐文章于 2024-04-16 22:29:27 发布

SunShinessx

最新推荐文章于 2024-04-16 22:29:27 发布

阅读量925

点赞数 1

分类专栏： css 文章标签： css盒模型

本文链接：https://blog.csdn.net/SunShinessx/article/details/87299799

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一。css盒模型分为标准模型和IE模型

1.标准模型：浏览器默认模型，即box-sizing:content-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS盒模型</title>
    <style media="screen">
        *{
            padding: 0;
            margin: 0;
        }
        .content {
            width: 300px;
            height: 400px;
            border: 5px solid #242424;
            padding: 20px;
            background-color: #898989;
    
        }
    </style>
</head>
<body>
<p>css盒模型分为标准模型和IE模型</p>
<p>1.标准模型：浏览器默认模型，即box-sizing:content-box</p>

<div class="content">

</div>
</body>
</html>

通过浏览器可以看到：

原因就是：

350（width） = 300（content） + 20（padding）* 2 + 5（border）* 2
450（height）= 400 （content）+ 20（padding）* 2 + 5（border）* 2

2.IE模型：即box-sizing:border-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS盒模型</title>
    <style media="screen">
        *{
            padding: 0;
            margin: 0;
        }
        .content {
            width: 300px;
            height: 400px;
            border: 5px solid #242424;
            padding: 20px;
            background-color: #898989;
            box-sizing: border-box;
        }
    </style>
</head>
<body>

<div class="content">

</div>
</body>
</html>

通过浏览器可以看到：

二.。CSS盒模型与style.width,offsetWidth,clientWidth的关系？

1.首先：style.width是获取dom元素的css样式的style，没有设置css样式，则返回runtimeStyle,而当有设置css width的时候，返回值与盒模型无关。

样式表有三种方式：

内嵌样式（inline Style）：是写在Tag里面的，内嵌样式只对所有的Tag有效。（也称作“内联样式”）

内部样式（internal Style Sheet）：是写在HTML的里面的，内部样式只对所在的网页有效。

外部样式表（External Style Sheet）：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。最常用的是style属性，在JavaScript中，通过document.getElementById(id).style.XXX就可以获取到XXX的值，但意外的是，这样做只能取到通过内嵌方式设置的样式值，即style属性里面设置的值。

runtimeStyle 运行时的样式！如果与style的属性重叠，将覆盖style的属性！

currentStyle 指 style 和 runtimeStyle 的结合！通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了

所以，如果dom元素没有设置内嵌样式，通过dom.style.width获取不到值。

而dom.currentStyle（IE浏览器支持）或者window.getComputedStyle（非IE浏览器支持）获取的是runtimeStyle

具体代码如下：

let dom = document.getElementById('content');
if(dom.currentStyle) {
        var width = dom.currentStyle['width'];
        alert('ie:' + width);
    } else if(window.getComputedStyle) {
        var width = window.getComputedStyle(dom , null)['width'];
        alert('firefox:' + width);
    }

2.offsetWidth

返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）

显然，offsetWidth和dom元素设置的css盒模型是有关系的。比如上述例子中，box-sizing:centent-box的时候，offsetWtidh是350；而box-sizing:border-box的时候，offsetWidth是300；

3.clientWidth

返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）

总结：如果要获取dom元素在浏览器的实际占用文档的宽度，就用offsetWidth,不管什么盒模型。

SunShinessx

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS盒模型与style.width,offsetWidth,clientWidth的关系

一。css盒模型分为标准模型和IE模型1.标准模型：浏览器默认模型，即box-sizing:content-box&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;CSS盒模型&lt;/title&amp
复制链接

扫一扫