CSS 中的 offsetWidth、clientWidth、scrollWidth 和 Height 分别表示什么

在本文中，我们将了解 CSS offsetWidth、clientWidth、scrollWidth 之间的区别，以及 offsetHeight、clientHeight、scrollHeight 之间的区别，因为它们分别返回 HTML 元素的宽度和高度。

CSS offsetWidth、clientWidth 和 scrollWidth

  • offsetWidth： CSS offsetWidth 属性是元素的总宽度，包括实际的 宽度、填充、边框 和 滚动条（以像素为单位）。它不包括宽度中的 边距。它是 HTML 元素的外宽度。
  • clientWidth： CSS clientWidth 属性返回元素的实际宽度和填充。它不包括边距、边框或滚动条宽度。它是 HTML 元素的内宽度。
  • scrollWidth： CSS scrollWidth 属性返回可滚动内容的总宽度，包括填充，但不包括边框、边距、滚动条等。

示例

这是一个示例，我们使用了 HTML DOM 元素 offsetWidth、clientWidth 和 scrollWidth 属性来区分它们。

<html>
<head>
    <title>
        CSS offsetWidth, clientWidth, scrollWidth
        Properties
    </title>
    <style>
        .element {
            width: 300px;
            padding: 5px;
            border: 2px solid rgb(23, 2, 35);
            font-size: 2rem;
            color: green;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <h3>
        Using the offsetWidth, clientWidth, scrollWidth
        CSS properties to get different widths of an
        HTML element.
    </h3>
    <div class="element">
        <p class="text">
            The width of this div element is 300px.
            The left and right padding is 10px.
            The left and right border is 5px.
        </p>
    </div>
    <div id="output"> </div>
    <script>
        let element = document.querySelector('.element');
        document.getElementById("output").innerHTML =
            "offsetWidth: " + element.offsetWidth
            + "<br>" +
            "clientWidth: " + element.clientWidth
            + "<br>" +
            "scrollWidth: " + element.scrollWidth;
    </script>
</body>
</html>

CSS offsetHeight、clientHeight 和 scrollHeight

CSS offsetHeight、clientHeight 和 scrollHeight 属性与 CSS offsetWidth、clientWidth 和 scrollWidth 属性类似。

  • offsetHeight： CSS offsetHeight 属性返回元素的总 高度，包括实际高度、填充和边框。它是元素的外高度。
  • clientHeight： CSS clientHeight 属性仅返回实际高度和填充的总和。它是内部高度。
  • scrollHeight： CSS scrollHeight 属性返回可滚动内容的高度，包括填充。

示例

这是一个示例，我们使用了 HTML DOM 元素 offsetHeight、clientHeight 和 scrollHeight 属性来区分它们。

<html>
<head>
    <title>
        CSS offsetHeight, clientHeight, scrollHeight
        Properties
    </title>
    <style>
        .element {
            height: 100px;
            width: 300px;
            padding: 10px;
            border: 2px solid rgb(23, 2, 35);
            font-size: 2rem;
            color: green;
            overflow-x: hidden;
            overflow-y: auto;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <h3>
        Using the offsetHeight, clientHeight, scrollHeight
        CSS properties to get different heights of an
        HTML element.
    </h3>
    <div class="element">
        <p class="text">
            The height of this div element is 100px.
            The left and right padding is 10px. 
            The left and right border is 5px.
        </p>
    </div>
    <div id="output"> </div>
    <script>
        let element = document.querySelector('.element');
        document.getElementById("output").innerHTML =
            "offsetHeight: " + element.offsetHeight
            + "<br>" +
            "clientHeight: " + element.clientHeight
            + "<br>" +
            "scrollHeight: " + element.scrollHeight;
    </script>
</body>
</html>

结论

在本文中，我们学习并了解了 CSS offsetWidth、clientWidth 和 scrollWidth 属性之间的区别，以获取 HTML 元素的宽度。此外，我们还学习了 CSS offsetHeight、clientHeight 和 scrollHeight 属性之间的区别，这些属性返回 HTML 元素的各种高度。

更新于： 2024年8月9日

6K+ 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告