Js中offset、scroll、client的理解菜鸟知识_属性小白知识

在下开发中经常碰到 offset、scroll、client 这几个关键字,比如 offsetLeft、offsetHeight、scrollHeight、clientTop 什么的,每次都要各种实验,这里总结一下,一劳永逸。首先两张图镇楼,方便随时翻阅1. offsetoffset 指偏移,包括这个元素在文档中占用的所有显示宽度,包括滚动条、 paddin

Js中offset、scroll、client的理解菜鸟知识

在下开发中经常碰到 offset、scroll、client 这几个关键字,比如 offsetLeft、offsetHeight、scrollHeight、clientTop 什么的,每次都要各种实验,这里总结一下,一劳永逸。

Js中offset、scroll、client的理解菜鸟知识_属性小白知识

首先两张图镇楼,方便随时翻阅

Js中offset、scroll、client的理解菜鸟知识_属性小白知识

Js中offset、scroll、client的理解菜鸟知识_属性小白知识

1. offset

offset 指偏移,包括这个元素在文档中占用的所有显示宽度,包括滚动条、 padding、 border,不包括 overflow隐藏的部分

  1. offsetParent属性返回一个对象的引用,这个对象是距离调用 offsetParent的父级元素中最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。如果这个容器元素未进行CSS定位, 则 offsetParent属性的取值为根元素的引用。

    1. 如果当前元素的父级元素中没有进行CSS定位(position为 absolute/relative), offsetParent 为 body

    2. 如果当前元素的父级元素中有CSS定位( position 为 absolute/relative), offsetParent 取父级中最近的元素

  2. obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位:像素。

    offsetWidth = border-width*2+ padding-left+ width+ padding-right

  3. obj.offsetHeight 指 obj 控件自身的绝对高度,不包括因 overflow 而未显示的部分,也就是其实际占据的高度,整型,单位:像素。

    offsetHeight = border-width*2+ padding-top+ height+ padding-bottom

  4. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位:像素。

    offsetTop= offsetParent的padding-top + 中间元素的offsetHeight + 当前元素的margin-top

  5. obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位:像素。

    offsetLeft= offsetParent的padding-left + 中间元素的offsetWidth + 当前元素的margin-left

2. scroll

scroll指滚动,包括这个元素没显示出来的实际宽度,包括 padding,不包括滚动条、 border

  1. scrollHeight 获取对象的滚动高度,对象的实际高度;

  2. scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

  3. scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

  4. scrollWidth 获取对象的滚动宽度

3. client

client指元素本身的可视内容,不包括 overflow被折叠起来的部分,不包括滚动条、 border,包括 padding

  1. clientWidth 对象可见的宽度,不包括滚动条等边线,会随窗口的显示大小改变

  2. clientHeight 对象可见的高度

  3. clientTop、clientLeft 这两个返回的是元素周围边框的厚度,一般它的值就是0。因为滚动条不会出现在顶部或者左侧

海计划公众号
(0)
上一篇 2020/03/26 23:32
下一篇 2020/03/26 23:32

您可能感兴趣的内容

  • 高效的学习的几种方式入门基础知识_学习小白基础

    最近看了万维钢老师的《万万没想到》这本书感触很多。学习可以说是生活中的一部分,无论是为了升值加薪还是为了扩充自己的知识面,还是无意中的好奇心,我们都会去学习。不过很多时候,学过的东西没多久就忘记了,有人说在一个领域练习一万个小时就能成为这个领域的高手,可是你在某一行呆了很多年了依然菜的不行。怎么才能让自己的知识技能不断进步呢,当然就是学习,不过并不是学了就真

    2020/03/29
  • Cashify小白指南_轻量级货币转换库,money.js的继承者

    Cashify小白指南 GitHub:https://github.com/xxczaki/cashify 简介描述:轻量级货币转换库,money.js的继承者 Cashify是一…

    2020/03/11
  • Apache2简单配置使用帮助_Apache入门基础

    1.安装Apache2 sudo apt-get updatesudo apt-get install apache2.启动服务sudo /etc/init.d/apache2 start # start | restart | stop

    service apache2 start | restart | stop3.配置虚拟站点在sites-ava

    2020/04/03
  • 彻底理解浏览器缓存机制小白知识_缓存零基础入门

    概述浏览器的缓存机制也就是我们说的 HTTP 缓存机制,其机制是根据 HTTP 报文的缓存标示进行的。所以在分析浏览器缓存之前,我们先使用图文简单介绍一下 HTTP 报文,HTTP 报文分为两种:HTTP 请求(Request)报文。报文格式为:请求行。HTTP 头(通用信息头,请求头,实体头)。请求报文主体(只有 POST 才有报文主体)。HTTP 响应(

    2020/03/22
  • 程序员如何找到女朋友?使用教程_程序员小白入门

    谈谈程序员如何找女朋友,程序员如何找到女朋友?这里有几点战略性的建议:一、如何搭讪不要害羞有一部分程序员“天生不够淫荡”,看到女生就会脸红,尤其是自己喜欢的女生,相反,在电脑上和女生聊天就放得开多了,这大概是长时间和机器接触的缘故吧,但是事实是网络上聊一万句也比不上当面搭讪的一句话,所以,面对女生,一定要克服自己内心害羞的障碍,迈出第一步,其实你发现跟女生面

    2020/03/29
  • r2新手入门_一款基于浏览器 Fetch API 的 http 客户端

    r2新手入门 GitHub:https://github.com/mikeal/r2 简介描述:一款基于浏览器 Fetch API 的 http 客户端 r2与 request为同…

    2020/03/06
  • vue-cli3.0中自定css、js和图片的打包路径指南教程_打包新手入门

    前言我们有时候因为一些特殊需求,可能需要将js/css/img等资源文件都打包到根路径下,但vue-cli3.0的路径配置中仅有assetsDir配置项能够配置所有的静态文件所在的文件夹,并不能针对css/js/img等资源文件分别来做设置,那么请看我如何尝试的吧!分析众所周知,vue-cli3.0使用了webpack进行打包处理,那么我们是否可以拿到目前打

    2020/03/26
  • 如何写出一个惊艳面试官的 Promise小白基础_面试小白入门

    前言1.高级 WEB 面试会让你手写一个Promise,Generator 的 PolyFill(一段代码); 2.在写之前我们简单回顾下他们的作用; 3.手写模块见PolyFill.源码源码地址请戳,原创码字不易,欢迎 star如果觉得看文章太啰嗦,可以直接 git clone ,直接看代码1.Promise1.1 作用Promise 大家应该都用过,aj

    2020/03/23
  • 10种免费的工具让你快速的、高效的使用数据可视化小白基础_可视化基础知识入门

    不要简单地展示数据,用它讲个故事!是的,我们有数据,并有了数据的洞察,然后呢?显然,下一步将是与人们交流这些发现,以便他们采取必要的行动。最有效的数据交流方式之一就是讲故事。但是要成为有效的讲述者,我们需要简化事情,而不是使事情复杂化,这样使得分析的真正本质不会丢失。在讲故事和可视化方面,有许多工具可供选择。有些是免费的,有些是付费订阅的。有些简单直观,但缺

    2020/03/26
  • web前端以文件流的形式导出Excel文件菜鸟知识_文件入门基础教程

    一般web前端处理导出文件有两种方法:1、服务端返回完整URL,直接打开URL即可; 2、服务端返回数据流,前端解析数据流完成导出功能; 今天主要分享下第二种方式,直接上代码(兼容ie10以上):// url为服务端返回的流数据
    const exportParams = (url) => {const aLink = document.createElem

    2020/03/26
  • Quill 实践指南入门基础_指南指南攻略

    quill 定制富文本编辑器很多时候