JavaScript三大家族_好_快的博客-程序员秘密

技术标签： offset 三大家族 scroll client JavaScript学习笔记 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>

参考链接

本文链接：https://blog.csdn.net/ZWQ0325/article/details/111496594

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

20190608 JavaBean转jsonString时首字母大写的问题_bean转成json 首字母大写_LLLLLLLLEE的博客-程序员秘密

JavaBean转jsonString时首字母大写的问题这次出差，对接第三方发行系统，又出现了大驼峰命名的json字符串，因此做个笔记记录下。约定俗成的，JavaBean的属性采用小驼峰命名法。但是，在对接接口的过程中，如果是要去接入别人的接口，如果对方没有使用约定俗成的小驼峰命名，那么也只能自己做出调整适配了。这样的事情也遇到过几次了。有的是对接自己公司php的接口，有的是对接第三方系统的...

【错误记录】Flutter 报错 ( Could not read script ‘xxx\flutter_tools\gradle\app_plugin_loader.gradle‘ )_could not read script 'd:\app\android project\adve_韩曙亮的博客-程序员秘密

Could not read script 'D:\001_Programs\004_Flutter\flutter\packages\flutter_tools\gradle\app_plugin_loader.gradle' as it does not exist.

kuangbin六A：POJ 1251 Jungle Roads（最小生成树模板题）_kuangbin最小生成树模板_Izayoi_w的博客-程序员秘密

Description：模板题没啥好说的prim：#include &lt;iostream&gt;#include &lt;cstdio&gt;#include &lt;cstring&gt;#include &lt;algorithm&gt;using namespace std;const int INF = 0x3f3f3f;int Map[30][30]...

java将json中文转换_Java 与 Json的互相转换_weixin_39665992的博客-程序员秘密

这几天一直在做Java解析Json数据的一个项目，因为初识json，所以很多东西都是有着懵懂的认识。这里写下我解析时遇到的问题和收获。我解析json时用到的是json-lib包。下载地址：http://json-lib.sourceforge.net。用这个包时，还要用到其他几个支持包：commons-lang.jar、commons-logging.jar，commons-beanutils.j...

IntellijIdea2018 Liscense server激活码_idea liscense_Allen权林的博客-程序员秘密

点击liscense server，输入以下链接http://idea.toocruel.net（2018.8.14更新可用）http://idea.tooadmin.nethttp://idea.congm.in亲测有效！！！

ajax乱码解决汇总_weixin_33858485的博客-程序员秘密

ajax乱码解决总结第一，javascript沿用java的字符处理方式，内部是使用unicode来处理所有字符的，第二，utf-8是每个汉字（unicode字符）用3个字节来存储。第三，用utf-8来send数据是不会出现乱码的，是后台程序没有正确解码才会出现乱码。第四，ajax发送数据的时候如果修改 Content-Type 为 application/x-www-form-url...