弄清楚烦人的clientHeight与clientTop、scrollHeight与scrollTop、offsetHeight与offsetTop与JQuery中的innerHeight()与...-CFANZ编程社区

弄清楚烦人的clientHeight与clientTop、scrollHeight与scrollTop、offsetHeight与offsetTop与JQuery中的innerHeight()与...

clientHeight与clientTop

clientHeight

clientTop

注意如下情况：
?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>clientHeight</title>
  <style>
    div#ct {
      width: 250px;
      height: 250px;
      border: 15px solid blue;
      text-align: center;
      background-color: pink;
      margin: 100px;
      padding: 20px;
      overflow: scroll;
    }
    div#item {
      color: red;
      background-color: #666;
      width: 400px;
      height: 1000px;
    }
  </style>
</head>
<body>
 <div id="ct">
   <div id="item">Helo World!</div>
</div>
</body>
</html>

Element.getBoundingClientRect()

element.getBoundingClientRect()包括 top right bottom left height width

top right bottom left: 相对于视口左上角的原点位置，不包括 margin 的值，但是会包括滚动条

height width: height 矩形盒子的高度。 width矩形盒子的宽度，且存在width = right - left height = bottom - top

scrolltHeight与scrollTop

scrollHeight

scrollTop

注：如果垂直方向的scrolllBar存在，且当前元素滚动到底:

element.scrollHeight - element.scrollTop === element.clientHeight
// true

offsetHeight与offsetTop

offsetHeight(高度偏移)

offsetHeight = content + padding + border + 水平方向的scrollBar

offsetTop(顶部偏移)

也就是当前元素的 border-top(不包括border的值) 到最接近的父元素的margin-top边缘的距离

JQuery中的 innerHeight与outerHeight

参考：

MDN

nsIDOMClientRect-MDN

stack overflow-What is offsetHeight, clientHeight, scrollHeight?

medium-Difference between offsetHeight, clientHeight and scrollHeight

stack overflow- What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery - Stack Overflow

0 条评论