获取元素的宽度，高度

最新推荐文章于 2025-06-16 18:41:56 发布

原创最新推荐文章于 2025-06-16 18:41:56 发布 · 7.4k 阅读

2 ·

CC 4.0 BY-SA版权

CSS 同时被 2 个专栏收录

23 篇文章

订阅专栏

DOM

2 篇文章

订阅专栏

1. style.width 适合行内样式

style. : 这种方式不适合取值，适合给元素设置样式

<div style="width:100px;"></div>

2. window.getComputedStyle(elem).width Chrome, FF, IE9+支持此方法（现代浏览器）

3. elem.clientWidth 可视宽度 padding+元素宽度，对于行内元素，元素的宽度获取不了，此属性也不起作用

获取网页的高度：document.documentElement.clientHeight

注意： document.documentElement是html，文档元素

获取文档的宽高：
var w=document.documentElement.clientWidth; document.body.clientWidth这种写法是不对的
var h=document.documentElement.clientHeight;

css中用：root表示html选择器，假如body设置了背景色红色，html不设置，那么此红色会填充整个网页，如果再给:root设置了蓝色的背景色，那么蓝色填充整个网页，红色只填充到有网页元素的部分

4. elem.offsetWidth 占位宽，可视宽度+border

The HTMLElement.offsetHeight read-only property is the height of the element including vertical padding and borders, as an integer.

Typically, an element's offsetHeight is a measurement in pixels of the element's CSS height, including border, padding and the element's horizontal scrollbar (if present, if rendered). It does not include the height of pseudo-elements such as :before or :after.

对于行内元素可以用此属性，但是获取的值在各浏览器中不一致，解决办法是，首先把行内元素转化为块元素，然后设置其宽高，再用clientWidth和offsetWidth

<span id="span1">spanspanspanspanspanspanspanspan</span>

#span1{
    display: block;
    width: 300px;
}

5. scrollWidth 元素的内容的实际尺寸，尤其是内容溢出时，不同浏览器scrollWidth还不一样

另外，如果元素设置了box-sizing，还必须考虑box-sizing的值

① 如果设置了box-sizing: content-box；

#div1 {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid #000;
    box-sizing: content-box;
}

那么样式中的width100px就是内容宽，此时clientWidth=100+10+10，offsetWidth=100+10+10+10+10

② 如果设置了box-sizing: border-box;

#div1 {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid #000;
    box-sizing: content-box;
}

那么样式中的width100px就是包含了border的宽度，所以100px=border+padding+内容宽，计算内容宽=60

这时clientWidth=60+10+10，offsetWidth=60+10+10+10+10