这三个是是js盒模型属性

client

clientWidth 内容宽度加上左右padding
clientHeight 内容高度加上上下padding
clientTop 上边框的宽度
clientLeft 左边框的宽度

offSet

offSetWidth 内容宽度加左右padding加左右border
offSetHeight 内容高度加上下padding加上下border
offSetLeft
IE9+和高级浏览器和IE6/7
指的是元素自身的左边框外部到offsetparent左边框左边的距离
IE8
比高版本的浏览器的offSetLeft多一个offSetLeft边框,就是多了一个自身的边框宽度
offSetTop
指的是元素自身的上边框外部到offsetparent上边框上边的距离
offSetParent
ie8+和高级浏览器没有兼容问题
如果一个元素他的祖先中都没有定位,offSetParent就是body元素 加入祖先元素有定位,则以最近的带有定位的祖先元素为准,与自己是否定位无关
ie6和7浏览器
自身没有定位,参考的是最近的有宽高的祖先元素,没有宽高参考的是body
自身有定位与高级浏览器一致

scroll

scrollWidth约等于左边padding+内容真实宽度
scrollHeight约等于上边padding+内容真实高度

offSet和client和scroll的更多相关文章

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

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

  2. offset系列,client系列,scroll系列回顾

    一 scroll系列属性      ——滚动

  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. JavaScript 之 offset 、client、scroll

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

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

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

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

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

  9. JavaScript offset、client、scroll家族

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

随机推荐

  1. spring context对象

    在 java 中, 常见的 Context 有很多, 像: ServletContext, ActionContext, ServletActionContext, ApplicationContex ...

  2. NodeJS学习笔记 进阶 (10)Nodejs 进阶：log4js入门实例(ok))

    个人总结:读完这篇文章讲解了log4js的使用,具体更多可以参考npmjs上看,读完这篇需要15分钟. 摘选自网络 对于线上项目用来说,日志是非常重要的一环.log4js是使用得比较多的一个日志组件, ...

  3. MYSQL8.0的安装方法

    1.下载zip安装包: MySQL8.0 For Windows zip包下载地址:https://dev.mysql.com/downloads/file/?id=476233,进入页面后可以不登录 ...

  4. [bzoj4765]普通计算姬（分块+树状数组+DFS序）

    题意 给定一棵n个节点的带权树,节点编号为1到n,以root为根,设sum[p]表示以点p为根的这棵子树中所有节点的权值和.计算姬支持下列两种操作: 1 给定两个整数u,v,修改点u的权值为v. 2 ...

  5. [洛谷P1939]【模板】矩阵加速（数列）

    题目大意:给你一个数列a,规定$a[1]=a[2]=a[3]=1$,$a[i]=a[i-1]+a[i-3](i>3)$求$a[n]\ mod\ 10^9+7$的值. 解题思路:这题看似是很简单的 ...

  6. malloc()和free()的原理及实现

    在C语言中只能通过malloc()和其派生的函数进行动态的申请内存,而实现的根本是通过系统调用实现的(在linux下是通过sbrk()系统调用实现). malloc()到底从哪里得到了内存空间?答案是 ...

  7. ArcGIS api for javascript——显示多个查询结果

    描述 本例展示了在重叠的多边形处理查询的一种方式.单击一个石油和天然气的字段来查看地图上的高亮显示.如果仅仅点击一个要素,能够在单击一次来查看包含一些属性的InfoWindow.如果偶然单击到重叠的要 ...

  8. 为OLED屏添加GUI支持3：字库

    为OLED屏添加GUI支持3:字库 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN10 开发环境:MDK5.13 MCU:STM3 ...

  9. cigarette

    #include<iostream> using namespace std; int main() { int N; cin>>N; while(N--) { int Who ...

  10. php数组增加元素

    php数组增加元素 截图 代码 <HTML> <HEAD> <TITLE>给数组增加元素</TITLE> </HEAD> <? $Ci ...