DOM元素尺寸位置计算总结clientWidth&offsetWidth&offsetParent&offsetLeft&scrollWidth&scrollLeft

最新推荐文章于 2023-12-20 13:55:01 发布

原创最新推荐文章于 2023-12-20 13:55:01 发布 · 822 阅读

2 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了CSS盒模型的不同属性（content-box、padding-box 和 border-box）及其在浏览器中的应用。此外，还深入探讨了如何通过JavaScript访问和操作DOM元素的尺寸，包括clientWidth、offsetWidth、scrollWidth等属性的使用方法。

CSS盒模型

CSS中的 box-sizing 属性定义了浏览器应该如何计算一个元素的总宽度和总高度。

链接：https://blog.youkuaiyun.com/chenjie9230/article/details/108718480

content-box:包括内容区

padding-box:包括内容区+内边距

border-box:包括内容区+内边距+边框

浏览器内核

浏览器	内核
Google Chrome	Webkit 俗称为Chromium内核或Chrome内核
Internet Explorer	Trident俗称的IE内核
Mozilla Firefox	Gecko俗称Firefox内核
Safari	Webkit
Opera	Webkit

DOM尺寸相关

获取元素尺寸

element.clientWidth

返回块元素的可视区域( 内容区+水平方法内边距 )的宽度数值（也就是padding-box的宽度数值以像素记）不包括边框，外边距或垂直滚动条（如果存在）。返回的结果是一个不带单位的数值。
- 例1

在这里插入图片描述

内联元素以及没有 CSS 样式的元素的clientWidth 属性值为 0。

element.offsetWidth

HTMLElement.offsetWidth是一个只读属性，返回一个元素的布局宽度。一个典型的（各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的可视区域加边框( 内容区+水平方向内边距+水平方向边框+竖直方向滚动条(如果存在) )的宽度数值（也就是border-box的宽度数值）。返回的结果是一个不带单位的数值。
然而，对于可被截断到下一行的行内元素（如 span），``offsetWidth和offsetHeight` 描述的是边界框的尺寸。
- 例1
  
  下面的例子中，我们知道对于内联元素来说，垂直方向的border会生效但是不会影响布局，也就是不会影响span的位置，所以上面的border就没有显示出来。(链接：https://blog.youkuaiyun.com/chenjie9230/article/details/108718480)
  
  offsetWidth=内容区宽度(在页面中的宽度值) + border-width*2 + padding-width*2
  
  offsetHeight=内容区宽度(在页面中的高度值) + border-height*2 + padding-height*2

在这里插入图片描述

例2：内联元素被换行截断

下面的例子中，span换行到了下一行，但是第二行的边框遮住了第一行的几个文字。

在这里插入图片描述

获取视口尺寸

document.documentElement.clientWidth 获取视口的宽度数值
document.documentElement.offsetWidth 获取根标签（html标签）的border-box的宽度数值 (IE10及以下是获取视口宽度数值)

DOM位置相关

offsetParent

offsetParent简介

HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。offsetParent 很有用，因为 offsetTop和 offsetLeft都是相对于其内边距边界的。当前元素相对于该对象偏移。

本身定位为fixed(参照视口定位) 
    ===> offsetParent:null  （IE7及以上 chrome）√
    ===> offsetParent:body  （火狐）√
    ===> offsetParent:最近的包含该元素的定位(可以是relative/absolute)祖先元素，如果没有定位(relative/absolute)祖先元素返回body  （IE7以下）√

本身定位不为fixed（也就是 没有定位/relative/absolute）
    祖先元素都没有定位
    	===> offsetParent:body √
    存在祖先元素有relative/absolute/fixed定位
        ===> offsetParent:最近的包含该元素的定位  (可以是fixed/relative/absolute)祖先元素 √
        ===> 但是在IE7以下：不会将定位为fixed的祖先元素作为offsetparent，如果没有其他类型  (relative/absolute)的定位祖先元素，返回body √
元素本身或其祖先元素被设置display为none
    ===> offsetParent:null  （chrome 火狐）√
    ===> offsetParent:null  （IE11）

测试代码

<!DOCTYPE html>
<html lang="en" id="html">
<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 type="text/css">
        #wrap{
            position: absolute; 
        }
        #inner1{
            /* position: fixed; */
            display: none;
        }
        #inner2{
            /* position: relative; */
            /* display: none; */
        }
        #inner3{
            /* display: none; */
            /* position: fixed; */
            /* display: none; */
        }
    </style>
</head>
<body id="body">
    <div id="wrap">wrap
        <div id="inner1">inner1
            <div id="inner2">inner2
                <div id="inner3">innerinner</div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    window.onload = function () {
        alert(inner3.offsetParent);
        console.log(inner3.offsetParent && inner3.offsetParent.id);
    }
</script>
</html>

offsetParent的作用

offsetLeft 和 offsetTop 是参照于offsetParent的padding-box边界的，如下图所示。dom里所有的元素都是有offsetLeft 和 offsetTop的

在这里插入图片描述

offsetParent和parentNode的区别

分清parentNode和offsetParent的区别

parentNode：直接父级

offsetParent：类似于css的包含块

offsetLeft / offsetTop

offsetLeft / offsetTop简介

HTMLElement.offsetLeft 是一个只读属性，返回当前元素左上角（border-box左上角）相对于HTMLElement.offsetParent节点的左边界（padding-box的边界）偏移的像素值。

对块级元素来说，offsetTop、offsetLeft、offsetWidth及 offsetHeight描述了元素相对于 offsetParent 的边界框。返回的结果是一个不带单位的数值。

在这里插入图片描述

然而，对于可被截断到下一行的行内元素（如 span），offsetTop和 offsetLeft 描述的是第一个边界框的位置，而 offsetWidth 和 offsetHeight 描述的是边界框的尺寸。因此，使用 offsetLeft、offsetTop、offsetWidth、offsetHeight 来对应 left、top、width 和 height 的一个盒子将不会是文本容器span的盒子边界。

滚动条相关

element.scrollWidth

返回元素的整体宽度数值，包括带滚动条的隐蔽的地方。

Element.scrollWidth 这个只读属性是元素内容宽度的一种度量，包括由于overflow溢出而在屏幕上不可见的内容。scrollWidth值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。宽度的测量方式与clientWidth相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。

element.scrollLeft / scrollTop

读取或设置滚动条滚动时元素内容移动的距离数值。是一个不带单位的数值。

scrollLeft 可以是任意整数，然而：

如果元素不能滚动（比如：元素没有溢出），那么scrollLeft 的值是0。
如果给scrollLeft 设置的值小于0，那么scrollLeft 的值将变为0。
如果给scrollLeft 设置的值大于元素内容可以移动的最大宽度，那么scrollLeft 的值将被设为最大宽度。

在这里插入图片描述

scrollLeft / scrollTop 兼容性问题

浏览器的滚动条滚动时页面移动的距离数值的获得有兼容性问题，chrome认为浏览器的滚动条是body的，可以通过document.body.scrollTop来获取，火狐等浏览器认为滚动条是html的。

window.onscroll = function () {
 var L = document.documentElement.scrollLeft || document.body.scrollLeft; // 兼容性处理
 var T = document.documentElement.scrollTop || document.body.scrollTop;
 console.log(L, T);
};