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

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

智能推荐

js发送邮件_桥王的博客-程序员秘密

前言：首先在开发前需要了解JS是没有提供直接操作Email的接口，所以我们只能通过JS操作第三方的接口来web前端的邮件发送功能，下面列举能够在通过前端实现邮件发送的几种方式：方式一：&lt;a href="mailto:[email protected]?subject=test&amp;[email protected]&amp;body=use mailto sample"&gt;sen...

LeetCode 102. 二叉树的层序遍历_pengjunzhen的博客-程序员秘密

LeetCode 102. 二叉树的层序遍历题目：解题方法：方法1：DFS（递归）Java实现题目：LeetCode 102. 二叉树的层序遍历给你一个二叉树，请你返回其按层序遍历得到的节点值。（即逐层地，从左到右访问所有节点）。示例：二叉树：[3,9,20,null,null,15,7],3/ 9 20/ 15 7返回其层次遍历结果：[[3],[9,20],[15,7]]解题方法：方法1：DFS（递归）Java实现/** * Definiti

poj 北大oj 2201 Cartesian Tree_中序遍历笛卡尔树即可得到原数列_小冷在努力的博客-程序员秘密

题意分析：这道题考察的知识点就是数据结构的笛卡尔树，一下是我从网上找的有管笛卡尔树的一些介绍：1. 笛卡尔树（key,value）：在（解决范围搜索的集合）数据结构问题时提出的，从数列中构造一棵笛卡尔树可以线性时间完成。它具有堆的有序性，中序遍历可以输出原数列。笛卡尔树的性质1. 节点一一对应于数列元素2. 中序遍历笛卡尔树即可得到原数列3. 树结构

java创建简单注册登录网页_越小尘的博客-程序员秘密

1.配置环境做这次的小项目使用到的语言是java，当然eclipse是必不可少的，另外还需要用到的有Tomcat，MySQL，mysql-connector-java的bin包和Navicat。其实Navicat可以不装，但是为了更方便看到我们的数据库，还是建议装一下。这里介绍一下Tomcat和mysql-connector-java的bin包的配置。Tomcat的配置这里为了防

Intel Realsense D435 python wrapper pyrealsense.stream_profile类_Dontla的博客-程序员秘密

# encoding: utf-8# module pyrealsense2.pyrealsense2# from D:\Yolov3_Tensorflow\python\lib\site-packages\pyrealsense2\pyrealsense2.cp36-win_amd64.pyd# by generator 1.147"""LibrealsenseTM Python Bi...

配置Mybatis的mapper.xml可以自动补全_mapper.xml 自动补齐_quge_name_harder的博客-程序员秘密

复制 http://mybatis.org/dtd/mybatis-3-mapper.dtd点击myeclipse 的 window preferecxes