JavaScript三大家族

Posted 好_快

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript三大家族相关的知识，希望对你有一定的参考价值。

一、Offset 家族

1.1 offsetParent

  • 返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素（relative、absolute）或者最近的 table,td,th,body元素。
  • 只读属性
  • 在 Webkit 中，如果元素为隐藏的（该元素或其祖先元素的 style.display 为 “none”），或者该元素的 style.position 被设为 “fixed”，则该属性返回 null。
  • 在 IE 9 中，如果该元素的 style.position 被设置为 “fixed”，则该属性返回 null。（display:none 无影响。）

1.2 offsetWidth

  • 宽度
  • 只读
  • 取值：width + border-left + border-right + padding-left + padding-right
  • 不包含 margin

1.3 offsetHeight

  • 高度
  • 只读
  • 取值：width + border-top + border-bottom + padding-top + padding-bottom
  • 不包含 margin

1.4 offsetLeft

  • 当前元素左上角相对于 offsetParent 节点的左边界偏移的距离
  • 只读

1.5 offsetTop

  • 返回当前元素相对于其 offsetParent 元素的顶部内边距的距离
  • 只读

代码示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>获取元素尺寸</title>
    <style>
      body 
        background: #f1f1f1;
        margin: 0;
      
      #parent 
        width: 400px;
        height: 400px;
        /*消除 margin-top问题*/
        padding-top: 1px;
        background: lightgray;
        /*position: relative;*/
        margin: 50px;
        border: 50px solid blue;
        overflow-y: scroll;
      
      #child 
        width: 100px;
        height: 100px;
        background: green;
        margin: 50px;
        border: 50px solid red;
        padding: 50px;
        overflow-y: scroll;
      
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">
        黄色部分为子元素，方便查看父节点内容区域,黄色部分为子元素，方便查看父节点内容区域,
      </div>
    </div>
    <script>
      const element = document.getElementById("child");
      console.log("offsetParent:", element.offsetParent);
      console.log("offsetWidth:", element.offsetWidth);
      console.log("offsetHeight:", element.offsetHeight);
      console.log("offsetLeft:", element.offsetLeft);
      console.log("offsetTop:", element.offsetTop);
    </script>
  </body>
</html>
<!--结果-->
offsetParent: <body>
Offset.html:41:15
offsetWidth: 300 Offset.html:42:15
offsetHeight: 300 Offset.html:43:15
offsetLeft: 150 Offset.html:44:15
offsetTop: 151 Offset.html:45:15

二、Client 家族

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hEFLNLrC-1608553256252)(https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/346/e376ef78f757870d6d5327498c745681/Dimensions-client.png)]

2.1 clientWidth

  • 元素的内部宽度，包含padding-left 和 padding-right
  • 只读

2.2 clientHeight

  • 元素的内部高度,包含padding-top 和 padding-bottom
  • 只读

2.3 clientLeft

  • 一个元素左边框的宽度
  • 只读

2.4 clientTop

  • 一个元素顶部边框的宽度
  • 只读

代码示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>获取元素尺寸</title>
    <style>
      body 
        background: #f1f1f1;
        margin: 0;
      
      #parent 
        width: 400px;
        height: 400px;
        /*消除 margin-top问题*/
        padding-top: 1px;
        background: lightgray;
        position: relative;
        margin: 50px;
        border: 50px solid blue;
        overflow-y: scroll;
      
      #child 
        width: 100px;
        height: 100px;
        background: green;
        margin: 50px;
        border: 60px solid red;
        padding: 50px;
        /*box-sizing: border-box;*/
      
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">
        黄色部分为子元素，方便查看父节点内容区域,黄色部分为子元素，方便查看父节点内容区域,
      </div>
    </div>
    <script>
      const element = document.getElementById("child");
      console.log("clientWidth:", element.clientWidth);
      console.log("clientHeight:", element.clientHeight);
      console.log("clientLeft:", element.clientLeft);
      console.log("clientTop:", element.clientTop);
    </script>
  </body>
</html>

<!--输出结果-->
clientWidth: 200 Offset.html:41:15
clientHeight: 200 Offset.html:42:15
clientLeft: 60 Offset.html:43:15
clientTop: 60 Offset.html:44:15

三、 Scroll 家族

3.1 offsetParent

  • 返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素（relative、absolute）或者最近的 table,td,th,body元素。
  • 只读属性
  • 在 Webkit 中，如果元素为隐藏的（该元素或其祖先元素的 style.display 为 “none”），或者该元素的 style.position 被设为 “fixed”，则该属性返回 null。
  • 在 IE 9 中，如果该元素的 style.position 被设置为 “fixed”，则该属性返回 null。（display:none 无影响。）

3.2 scrollWidth

  • 元素内容宽度的一种度量，包括由于overflow溢出而在屏幕上不可见的内容。
  • scrollWidth值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。
  • 宽度的测量方式与clientWidth相同
  • 如果元素的内容可以适合而不需要水平滚动条，则其scrollWidth等于clientWidth
  • 它还可以包括伪元素的宽度，例如::before或::after
  • 只读

3.3 scrollHeight

  • 元素内容高度的一种度量，包括由于overflow溢出而在屏幕上不可见的内容。
  • scrollHeight。
  • 宽度的测量方式与clientWidth相同
  • 如果元素的内容可以适合而不需要水平滚动条，则其 scrollHeight 等于 clientHeight
  • 它还可以包括伪元素的高度，例如::before或::after
  • 只读

3.4 scrollLeft

可以读取或设置元素滚动条到元素左边的距离

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

3.5 scrollTop

可以获取或设置一个元素的内容垂直滚动的距离

  • 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0。
  • 设置scrollTop的值小于0，scrollTop 被设为0
  • 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>获取元素尺寸</title>
    <style>
      body 
        background: #f1f1f1;
        margin: 0;
      
      #parent 
        width: 400px;
        height: 400px;
        /*消除 margin-top问题*/
        padding-top: 1px;
        background: lightgray;
        position: relative;
        margin: 50px;
        border: 50px solid blue;
      

      #child 
        width: 100px;
        height: 100px;
        background: green;
        margin: 50px;
        border: 60px solid red;
        padding: 50px;
        overflow-y: scroll;
      
      #child::before 
        content: "♥♥♥♥\\A♥♥♥♥♥\\A♥♥♥♥\\A♥♥♥";
        width: 100px;
      
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">
        黄色部分为子元素，方便查看父节点内容区域,黄色部分为子元素，方便查看父节点内容区域,
      </div>
    </div>
    <script>
      const element = document.getElementById("child");
      console.log("scrollWidth:", element.scrollWidth);
      console.log("scrollHeight:", element.scrollHeight);
      console.log("scrollTop:", element.scrollTop);
      console.log("scrollLeft:", element.scrollLeft);
      element.scrollTop = 10;
      console.log("scrollTop:", element.scrollTop);
      element.addEventListener("scroll", (e) => 
        console.log("scrollTop:", element.scrollTop);
      );
      console.log("offsetHeight:", element.clientHeight);
      if (element.scrollHeight > element.clientHeight) 
        console.log("内容溢出，需要滚动");
      
    </script>
  </body>
</html>

参考链接

以上是关于JavaScript三大家族的主要内容，如果未能解决你的问题，请参考以下文章

JSjs进阶--之JS三大家族：offset家族 Scroll家族 client家族

javascript三大家族：offset属性 scroll属性 client属性

JavaScript动画：offset和匀速动画详解(含轮播图的实现)

前端学习(49)~offset相关属性和匀速动画(含轮播图实现)

历代祖先是不是包括女性祖先？

JavaScript 学习-44.jQuery 遍历查找方法