offsetWidth、clientWidth、scrollWidth如何计算

最新推荐文章于 2023-12-29 14:30:42 发布

小鹏同学123s

最新推荐文章于 2023-12-29 14:30:42 发布

阅读量1.8k

点赞数 2

分类专栏： Javascript 文章标签： offsetWidth

本文链接：https://blog.csdn.net/qq_28839293/article/details/79296690

版权

Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

offsetWidth、clientWidth、scrollWidth如何计算

先贴一下测试用html，很简单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            height: 100px;
            width: 300px;
            padding: 10px;
            border: 5px solid black;
            outline: yellow solid 5px;
            /* overflow-y: scroll; */
        }
        span{
            /*display:block;
            width: 100px;*/
            padding: 10px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div>
        This is a div.<br/>
        hahahhahahahahahahahahahahahahahahahahahahahahahahahahahahah<br/>
        Test Content.<br/>
        Test Content.<br/>
        Test Content.<br/>
        Test Content.<br/>
    </div>
    <span>
        This is a span.
    </span>
    <script>
        let div = document.getElementsByTagName("div")[0];
        let span = document.getElementsByTagName("span")[0];

        console.log(`div的offsetWidth${div.offsetWidth}`);
        console.log(`span的offsetWidth${span.offsetWidth}`);
        console.log(`div的clientWidth${div.clientWidth}`);
        console.log(`span的clientWidth${span.clientWidth}`);
        console.log(`div的scrollWidth${div.scrollWidth}`);
        console.log(`span的scrollWidth${span.scrollWidth}`);
    </script>
</body>
</html>

offsetWidth

MDN的解释:The HTMLElement.offsetWidth read-only property returns the layout width of an element. Typically, an element’s offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width. If the element is hidden (for example, by style.display on the element or one of its ancestors to “none”), then 0 is returned.

大致意思是说offsetWidth包含border、padding、scrollbar和css width
实际测试：
块级元素offsetWidth=border+padding+CSS width(已包含scrollbar)
行内元素offsetWidth=border+padding+CSS width(已包含scrollbar)
clientWidth

MDN的解释：The Element.clientWidth property is zero for elements with no CSS or inline layout boxes, otherwise it’s the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin.

大致意思是说clientWidth包含padding、css width但是不包含scrollbar，且行内元素的clientWidth为0
实际测试：
块级元素clientWidth=CSS width + padding-scrollbar
行内元素clientWidth=0
scrollWidth

MDN的解释：The Element.scrollWidth read-only property is a measurement of the width of an element’s content, including content not visible on the screen due to overflow.
The scrollWidth value is equal to the minimum width the element would require in order to fit all the content in the viewport without using a horizontal scrollbar. The width is measured in the same way as clientWidth: it includes the element’s padding, but not its border, margin or vertical scrollbar (if present). It can also include the width of pseudo-elements such as ::before or ::after. If the element’s content can fit without a need for horizontal scrollbar, its scrollWidth is equal to clientWidth

大致意思是说scrollWidth包含content超出部分的宽度，包含padding但不包含scrollbar
实际测试：
块级元素scrollWidth有垂直方向滚动条时的值要大于无垂直方向滚动条时的值（）
行内元素scrollWidth=0