offset 和 client

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <style>

      .testDOM {

        width: 200px;

        height: 200px;

        background-color: #2de;

        padding: 20px;

        border: 10px solid #ec6;

        margin: 20px;

      }

    </style>

  </head>

  <body>

    <div class="testDOM"></div>

    <script>

      let test = document.querySelector('.testDOM')

      console.log('offsetWidth', test.offsetWidth) // width + padding(左右) + border（左右）260

      console.log('offsetHeight', test.offsetHeight) //  height + padding(上下) + border(上下)260

      // 获取元素的坐标，相对于其最近的定位的上级元素的坐标。否则，相对于body。

      console.log('offsetLeft', test.offsetLeft) // 28 body有8px的padding

      console.log('offsetTop', test.offsetTop) // 20

      // 获取元素的最近的定位的上级元素 没有最近的定位的上级元素，所以获取body

      console.log('offsetParent', test.offsetParent) // <body>

      console.log('clientWidth', test.clientWidth) // width + padding(左右) 240

      console.log('clientHeight', test.clientHeight) // height + padding(上下) 240

      // 获取元素的坐标，获取当前节点对象的padding的外边界，距离border外边界的距离。实际上就是左边框的厚度。

      console.log('offsetLeft', test.offsetLeft) // 28

      console.log('offsetTop', test.offsetTop) // 20

      // 获取当前节点对象的宽度和高度，返回数字，不包含单位。

      console.log('scrollWidth', test.scrollWidth) // width+padding（左右）+ 溢出部分 240

      console.log('scrollHeight', test.scrollHeight) // height+padding（上下）+ 溢出部分 240

    </script>

  </body>

</html>

scroll

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <style>

      * {

        margin: 0;

        padding: 0;

      }

      .father {

        width: 300px;

        height: 300px;

        background-color: #3de;

        margin: 100px auto;

        padding: 10px;

        overflow: auto;

        border: 10px solid red;

      }

      .son {

        width: 400px;

        height: 600px;

        background-color: yellowgreen;

      }

    </style>

  </head>

  <body>

    <div class="father">

      <div class="son"></div>

    </div>

    <script>

      var fNode = document.querySelector('.father')

      fNode.onscroll = function () {

        // 获取元素中被卷去的内容的距离 获取元素内部总被卷去的内容的横向距离  和  纵向距离

        console.log('x:' + fNode.scrollLeft)

        console.log('y:' + fNode.scrollTop)

      }

    </script>

  </body>

</html>

offset系列、client系列、scroll系列的更多相关文章

  1. offset、client、scroll开头的属性归纳总结

    HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...

  2. offset 、 client 和 scroll - PC端网页特效

    1.元素偏移量  offset 系列 1.1 offset 就是偏移量,使用 offset 系列相关属性可以 动态 得到该元素的位置(偏移).大小等. 注意: 1.获得元素距离带有定位父元素的位置 2 ...

  3. JS-元素大小深入学习-offset、client、scroll等学习研究笔记

    一些属性和方法,在dom中没有规定如何确定页面中元素大小的情况下诞生... 1.偏移量(offset dimension) 测试代码: <!DOCTYPE html> <html&g ...

  4. offset、client、scroll、screen的自己理解

    body是DOM对象里的body子节点,即 <body> 标签: documentElement 是整个节点树的根节点root,即<html> 标签: window.scree ...

  5. javascript的offset、client、scroll、screen使用方法

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAHuCAYAAABpm/53AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjw

  6. offSet和client和scroll

    这三个是是js盒模型属性 client clientWidth 内容宽度加上左右padding clientHeight 内容高度加上上下padding clientTop 上边框的宽度 client ...

  7. JavaScript 之 offset 、client、scroll

    下面这三组是关于元素大小.位置相关的属性 一.offset 偏移量 1.offsetParent 该属性获取距离当前元素最近的定位父元素,如果没有定位父元素此时是 body 元素 2.offsetLe ...

  8. 原生js里的offset、client、scroll三大家族

    offset家族 自己的,用于获取元素自身尺寸 offsetWidth 和 offsetHeight 获取元素自身的宽度和高度,包括内容+边框+内边距 offsetLeft 和 offsetTop 距 ...

  9. JavaScript offset、client、scroll家族

    offsetParent <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  10. offset，client，scroll，style相关笔记

    1.offsetTop 功能:获取元素上外缘与最近的定位父元素内壁的距离,如果没有定位父元素,则是与文档上内壁的距离 使用方法:js document.querySelector(...).offse ...

随机推荐

  1. pytesseract 识别率低提升方法

    pytesseract 识别率低提升方法 一.跟换识别语言包 下载地址https://github.com/tesseract-ocr/tessdata 二.修改图片的灰度 from PIL impo ...

  2. 045、Java中使用if语句进行判断

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  3. asp.net+sql数据库学生信息管理系统

    一款学生信息管理系统送给大家. 功能部分: 1.教师管理(添加,修改,删除,查看) 2.学生管理(添加,修改,删除,查看) 3.班级管理(添加,修改,删除,查看) 4.学生成绩管理(添加,修改,删除, ...

  4. pig安装配置及实例

    一.前提 1. hadoop集群环境配置好(本人hadoop版本:hadoop-2.7.3) 2. windows基础环境准备: jdk环境配置.esclipse环境配置 二.搭建pig环境 1.下载 ...

  5. 反射①：如何获取class对象六种方法

    获取class对象的六种方法 了解:class类——是Java反射机制的入口,封装了一个类或接口的运行信息,通过调用Class类的方法可以获取这些信息,其特点如下: 1.该类在java.lang包中: ...

  6. 从0开始自己配置一个vps虚拟服务器(3)

    安装数据库mysql,因为这个服务器比较烂,我只能装低版本的数据库.尝试了很多遍,终于装上去了,高版本应该没那么麻烦. 我安装了很多遍,下载的安装包,都没有安装成功. mysql各版本安装地址: (我 ...

  7. HDU - 6143 Killer Names（dp记忆化搜索+组合数）

    题意:从m种字母中选取字母组成姓名,要求姓和名中不能有相同的字母,姓和名的长度都为n,问能组成几种不同的姓名. 分析: 1.从m种字母中选取i种组成姓,剩下m-i种组成名. 2.i种字母组成长度为n的 ...

  8. 利用 Python 破解 ZIP 或 RAR 文件密码

    我们经常会从网络上下载一些带密码的压缩包,想要获取里面的内容,往往就要给提供商支付一些费用.想要白嫖其中的内容,常见的做法是百度搜索一些压缩包密码破解软件,但后果相信体验过的人都知道.本文将会利用 P ...

  9. Spark RDD 宽窄依赖

    RDD 宽窄依赖 RDD之间有一系列的依赖关系, 可分为窄依赖和宽依赖 窄依赖 从 RDD 的 parition 角度来看 父 RRD 的 parition 和 子 RDD 的 parition 之间 ...

  10. sed -i添加到第一行

    用sed的i\命令在第一行前面插入即可,加上 -i 选项直接操作文件. sed -i '1i\要添加的内容' yourfile 查看插入第一行是否成功 sed -n '1,1p' yourfile