offsetWidth、clientWidth、scrollWidth如何计算

offsetWidth、clientWidth、scrollWidth如何计算

先贴一下测试用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>Documenttitle>
    <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
    offsetWidth、clientWidth、scrollWidth如何计算_第1张图片

    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
    offsetWidth、clientWidth、scrollWidth如何计算_第2张图片

    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

这三个属性的都会对值进行四舍五入

This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

你可能感兴趣的:(Javascript)