这三个是是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. CF983E NN country（倍增,差分）

    题意 给定一棵树和若干条路线,每条路线相当于树上 x,y 之间的路径,途径路径上的每个点 给出若干个询问,每次询问从 u 到 v 至少需要利用几条路线 N,M,Q≤200000 题解 构建倍增数组g[ ...

  2. python 高阶函数 与关键字参数

    修饰器 之前我一直有一个疑惑,就是修饰器里面对函数的操作为什么不能直接写进函数里面就好了吗?何必这么麻烦呢,当我进一步理解之后,原来修饰器的作用就是完成那些不能写进函数里面的功能的,好比必须要等到函数 ...

  3. 实现一个函数clone，可以对JS中的5种数据类型（Number、String、Object、Array、Boolean）进行值复制

     实现一个函数clone,可以对JS中的5种数据类型(Number.String.Object.Array.Boolean)进行值复制

  4. OC便利方法

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { #if //    从面向对象的角度 ...

  5. Xcode加入应用图标以及启动界面

    寻找了许久的资料,记录下Xcode加入应用图标以及启动界面的学习笔记: 很实用的网址: 1.(苹果官网)Designing for iOS 2.iOS 8 人机交互指南 图标和图片的尺寸參考: 更加具 ...

  6. 从C10K到C10M高性能网络的探索与实践

    在高性能网络的场景下,C10K是一个具有里程碑意义的场景,15年前它给互联网领域带来了非常大的挑战.发展至今,我们已经进入C10M的场景进行网络性能优化. 这期间有怎样的发展和趋势?环绕着各类指标分别 ...

  7. CentOS 与Ubuntu 安装软件包的对比

    工作需要开始转向centos,简单记录软件包安装 wget不是安装方式 他是一种下载软件类似与迅雷 如果要下载一个软件 我们可以直接 wget 下载地址 ap-get是ubuntu下的一个软件安装方式 ...

  8. js 判断对touch事件支持

    $.support = (function() { var support = { touch: !!(('ontouchstart' in window) || window.DocumentTou ...

  9. Network Stack‎ : Disk Cache

    Disk Cache 目录 1 Overview 2 External Interface 3 Disk Structure 3.1 Cache Address 3.2 Index File Stru ...

  10. POJ 3641 Pseudoprime numbers (miller-rabin 素数判定)

    模板题,直接用 /********************* Template ************************/ #include <set> #include < ...