zoukankan      html  css  js  c++  java
  • clientHeight,offsetHeight,scrollHeight迷一样的三个值

    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]。

     

  • 相关阅读:
    当Django模型迁移时,报No migrations to apply 问题时
    django--各个文件的含义
    django--创建项目
    1013. Battle Over Cities (25)
    1011. World Cup Betting (20)
    1009. Product of Polynomials (25)
    1007. Maximum Subsequence Sum (25)
    1006. Sign In and Sign Out (25)
    1008. Elevator (20)
    1004. Counting Leaves (30)
  • 原文地址:https://www.cnblogs.com/coder-lzh/p/10885474.html
Copyright © 2011-2022 走看看