[DOM] clientXX / offsetXX / scrollXX

david2tdw commented 4 years ago

element.clientWidth: 表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有的话）、边框和外边距。

document.body.clientWidth

element.clientHeight: 返回元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。

document.body.clientHeight

david2tdw commented 4 years ago

与offset相关属性

这一对属性指的是元素的border+padding+content的宽度和高度

element.offsetWidth: border/padding/width三者的总宽度，且是一个整数。

document.body.offsetWidth

element.offsetHeight: border/padding/height 三者的总高度，且是一个整数。

document.body.offsetHeight

david2tdw commented 4 years ago

element.scrollTop: 滚动条距顶部的距离.

element为有overflow属性的元素。 滚动条为内容高度超出容器高度时，出现的滚动条。

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <title>Javascript</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background: #ccc;
        font-size: 12px;
        overflow: hidden;
      }
      .main {
        width: 500px;
        height: 330px;
        position: relative;
        margin: 250px auto 0;
        background-color: #eee;
        overflow: auto;
      }
      .box {
        position: absolute;
        width: 220px;
        height: 500px;
        background-color: orange;
        top: 80px;
        left: 80px;
      }
    </style>
  </head>

  <body style="height: 1600px;">
    <div class="main" id="main">
      main
      <div class="box" id="box">box</div>
    </div>

    <script>
      var oMain = document.getElementById('main')
      var oBox = document.getElementById('box')

      window.onload = function () {
        oBox.onmousedown = function (ev) {
          ev = ev || window.event

          console.log(ev.offsetX, ev.offsetY)
          console.log(ev.clientX, ev.clientY)
          console.log(ev.pageX, ev.pageY)
          console.log(ev.screenX, ev.screenY)
          console.log(ev.layerX, ev.layerY)
          console.log(ev.x, ev.y)
        }
      }
    </script>
  </body>
</html>

console里输入:

oMain.scrollTop

具体解释见链接：为什么scrollTop设置后一直为0的解释和解决方案（精品）

david2tdw / blog

[DOM] clientXX / offsetXX / scrollXX #188

与offset相关属性