经常使用高度

2024年4月20日 160次阅读 来源: 余木

jquery

  1. height()：不margin和border, outerHeight(true)：什么都包含

  2. $().offset().top元素离顶部的高度，$().scrollTop()元素离浏览器可视顶部的高度

js：

  1. clientHeight 只包含padding offsetHight 不包含margin

  2. offsetTop示意该元素的左上角（边框外边沿）与已定位的父容器（offsetParent对象）左上角的间隔，猎取元素离顶部的高度：

 var offsetTop=function( elem ){
      var top = elem.offsetTop;
      var parent = elem.offsetParent;
      while( parent != null ){
      top += parent.offsetTop;
      parent = parent.offsetParent;
      }
      return top;
    }

  1. 元素离浏览器可视顶部的高度 ：getBoundingClientRect().top(其他种种方向)

  2. 其他经常使用的高度：浏览器可视高度：document.documentElement.clientHeight 浏览器转动高度：
    document.documentElement.scrollTop，浏览器文档的document.body.scrollHeight

    原文作者：余木
    原文地址: https://segmentfault.com/a/1190000006987874
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞