https://blog.csdn.net/qq_39083004/article/details/78498178

https://www.imooc.com/article/17571  推荐

offsetLeft

一个元素的offsetLeft值,就是这个元素左边框外,到自己的offsetParent对象的左边框内的距离

什么是offsetParent对象?

每一个元素,天生都有一个属性,叫做offsetParent,表示自己的“偏移参考盒子”,我们不称呼中文,就叫offsetParent。这个offsetParent是谁呢?

就是自己祖先元素中,离自己最近的已经定位的元素,如果自己的祖先元素中,没有任何盒子进行了定位,那么offsetParent对象就是body

op.offsetParent

无论这个盒子自己是否定位,自己的offsetParent就是按照上述方法寻找。

总结:

  IE6、7 IE8 IE9、IE9+、高级浏览器
offsetParent

如果自己没有定位,那么就是自己父亲中有width或者有height或者有定位的元素。

如果自己有定位,那么就是和高级浏览器一致。

和高级浏览器一致 自己祖先元素中,离自己最近的已经定位的元素
offsetLeft 和高级浏览器一致 多算一条border 自己的border外到offsetParet对象的border内

offsetWidth和offsetHeight

全线兼容,是自己的属性,和别的盒子无关。

一个盒子的offsetWidth值就是自己的 width+左右padding+左右border的宽度

如果盒子没有宽度,那么所有浏览器都将把px值当做offsetWidth,而不是100%;

如果盒子没有高度,用文字撑的,所有浏览器都将把px值当做offsetHeight

clientWidth和clientHeight

全线兼容,就一丢丢IE6的问题

client表示“客户端”这里就是一个名字而已,不用在意这个名字。

clientWidth就是自己的width+padding的值。 也就是说,比offsetWidth少了border。

如果盒子没有宽度,那么那么所有浏览器都将把px值当做clientWidth,而不是100%

如果盒子没有高度,用文字撑的,IE6 clientHeight是0,其他浏览器都是数值

卷动值scrollTop

页面的卷动值$(window).scrollTop();

窗口的高度$(window).height();

页面的总高度$(document).height();

页面的卷动值有一个范围:[0 , $(document).height() - $(window).height()];

也就是说,$(window).scrollTop() / ($(document).height() - $(window).height())一定是[0,1]。

clientHeight,offsetHeight,scrollHeight迷一样的三个值的更多相关文章

  1. clientHeight & offsetHeight & scrollHeight

    clientHeight & offsetHeight & scrollHeight scrollWidth/scrollHeight,offsetWidth/offsetHeight ...

  2. JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  3. 关于body/documentElement ---->clientHeight, offsetHeight, scrollHeight

    http://blog.csdn.net/woxueliuyun/article/details/8638427 http://blog.sina.com.cn/s/blog_9dd702d50101 ...

  4. clientHeight,offsetHeight与scrollHeight的相关知识

    在html里,width与height是最常用也是最基础的两个属性,因此,在js里,我们也经常需要操作这两个属性.js关于这两个属性提供了client*,offset*与scroll*,很多同学搞不清 ...

  5. 关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别

    二.也是平时经常用到的offsetheight 它返回的高度是内容高+padding+边框,但是注意哦,木有加margin哦,当然一般也木有啥需要把margin加进去的,以上代码为例,结果显示上图h2 ...

  6. 关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别一览

    平时,不管在pc端页面还是移动端页面,因为我们一般很少会设置某个块的的高度,但是呢,我有时候有需要取到这些高度以便于我们方便进行判断和下一步的编写.一般这个时候我都是直接的获取一个块的高度.heigh ...

  7. offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解

    一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offset ...

  8. 各种高度的区别及height、clientHeight、scrollHeight、offsetHeight的区分

    1.height.clientHeight.scrollHeight.offsetHeight 我们来实现test中的onclick事件    function justAtest()    {    ...

  9. offsetHeight, clientHeight与scrollHeight的区别

      在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论.以下结论皆是在标准模式下测试通过的,没有测试quirk模式. clientHeight 大部分浏览器对 clientHe ...

随机推荐

  1. FRCN文本检测(转)

    [源码分析]Text-Detection-with-FRCN 原创 2017年11月21日 17:58:39 标签: 659 编辑 删除 Text-Detection-with-FRCN项目是基于py ...

  2. C#指针使用demo

    #region 使用指针检索数据值 //class program //{ // // 1.项目属性勾选“允许不安全代码” // // 2.使用unsafe 修饰符 // // 这里是将整个Main方 ...

  3. 如何识别和解决SQL Server中的热闩锁(PAGELATCH_EX)

    描述 在SQL Server中,内部闩锁体系结构可在SQL操作期间保护内存.通过页面上的读写操作,可以确保内存结构的一致性.从根本上讲,它具有两个类:缓冲区锁存器和非缓冲区锁存器,它们在SQL Eng ...

  4. Mysql分布式集群

    一.准备 集群: 192.168.1.191  管理节点192.168.1.192  管理节点192.168.1.193  数据节点和API节点 192.168.1.194  数据节点和API节点 安 ...

  5. linux学习5 Linux开篇入门和基本操作

    一.完整的操作系统 1.GNU系统:表示GNU is Not Unix.表示不做商业化.制定了GPL(General Public License)即任何软件程序只要遵循GPL协议就是自由软件.还制定 ...

  6. 【概率论】6-1:大样本介绍(Large Random Samples Introduction)

    title: [概率论]6-1:大样本介绍(Large Random Samples Introduction) categories: - Mathematic - Probability keyw ...

  7. 如何快速把ps序列图层建立帧动画?

    工具ps 1.将序列帧图片载入ps 新建->脚本->将文件载入堆栈 2.制作序列帧动画 窗口->时间轴->时间轴面板右上角菜单->从图层建立帧 3.去除多余的透明画布 全 ...

  8. Python 程序打包成 exe 可执行文件

    Python 程序打包工具 Python 是一个脚本语言,被解释器解释执行.它的发布方式: .py 文件:对于开源项目或者源码没那么重要的,直接提供源码,需要使用者自行安装 Python 并且安装依赖 ...

  9. Mysql插入多条数据测试

    --新建存储过程 create procedure doinsert3() begin declare i int; declare j int; set i = 0; set j = 0; whil ...

  10. python3 之metaclass

    如果希望创建某一批类全部具有某种特征,则可通过 metaclass 来实现.使用 metaclass 可以在创建类时动态修改类定义. 为了使用 metaclass 动态修改类定义,程序需要先定义 me ...