JavaScript中获取DOM元素宽度和高度的常用API

12,488 阅读3分钟

client系列

clientWidth, clientHeight

对于内联元素, 其clientWidthclientHeight属性值为 0

clientWidthclientHeight的值会被四舍五入为一个整数

Element.clientWidth 属性表示元素的内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条(如果有)、边框和外边距 Element.clientHeight 属性同上

clientWidth = contentWidth + paddingWidth * 2

IF1wnr.png

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }
    #box {
      width: 100px;
      height: 100px;
      margin: 50px;
      border: 45px solid red;
      padding: 10px;
      background-color: green;
    }
  </style>
</head>
<body>
    <div id="box">
    </div>
<script>
    var box = document.getElementById('box');
    console.log(box.clientWidth); // => 120
    console.log(box.clientHeight); // => 120
</script>
</body>
</html>

clientTop, clientLeft

容器上边框和左边框的宽度值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }
    #box {
      width: 100px;
      height: 100px;
      margin: 50px;
      border: 45px solid red;
      padding: 10px;
      background-color: green;
    }
  </style>
</head>
<body>
    <div id="box">
    </div>
<script>
    var box = document.getElementById('box');
    console.log(box.clientLeft); // => 45
    console.log(box.clientTop); // => 45
</script>
</body>
</html>

offset系列

offsetParent

Element.offsetParent返回一个指向最近的(只包含层级的最近)包含该元素的定位元素或者最近的table, td, th, body元素, 当元素的style.display设置为none时, offsetParent返回为 null

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }
    #box {
      width: 100px;
      height: 100px;
      margin: 50px;
      border: 45px solid red;
      padding: 10px;
      background-color: green;
    }
  </style>
</head>
<body>
    <div id="box">
    </div>
<script>
    var box = document.getElementById('box');
    console.log(box.offsetParent); // => body元素
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }
    #box {
      width: 100px;
      height: 100px;
      margin: 50px;
      border: 45px solid red;
      padding: 10px;
      background-color: green;
      position: relative;
    }

    #child {
      width: 50px;
      height: 50px;
      margin: 50px;
      border: 45px solid red;
      padding: 10px;
      background-color: green;
    }
  </style>
</head>
<body>
    <div id="box">
      <div id="child"></div>
    </div>
<script>
    var child = document.getElementById('child');
    console.log(child.offsetParent); // => box元素
</script>
</body>
</html>

offsetWidth 和 offsetHeight

分别表示元素的布局宽度和布局高度,是由 元素的边框、 元素的padding, 滚动条的宽度(如果存在的话)以及CSS设置的宽度

该属性值会被四舍五入为一个整数

offsetWidth = contentWidth + padding * 2 + border * 2 = clientWidth + border * 2

IF14zC.png

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }
    #box {
      position: relative;
      width: 300px;
      height: 300px;
      background-color: red;
      overflow: hidden;
      margin: 50px;
    }
    #child {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin: 30px;
      border: 10px solid yellow;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="child">
    </div>
  </div>
 <script>
     var child = document.getElementById('child');
     console.log(child.offsetWidth); // => 140
     console.log(child.offsetHeight); // => 140
  </script>
</body>
</html>

offsetTop 和 offsetLeft

分别返回当前元素相对于其offsetParent元素的顶部和左侧内边距的距离

该属性值会被四舍五入为一个整数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }
    #box {
      position: relative;
      width: 300px;
      height: 300px;
      background-color: red;
      overflow: hidden;
      margin: 50px;
    }
    #child {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin: 30px;
      border: 10px solid yellow;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="child">
    </div>
  </div>
  <script>
     var box = document.getElementById('box');
     console.log(box.offsetTop); // => 50,父级没有定位,相对body
     console.log(box.offsetLeft); // => 50,父级没有定位,相对body
      
     var child = document.getElementById('child');
     console.log(child.offsetTop); // => 30,父级有定位,相对box
     console.log(child.offsetLeft); // => 30,父级有定位,相对box
  </script>
</body>
</html>

scroll系列

scrollWidth 和 scrollHeight

分别返回元素内容的宽度和高度,包括由于overflow溢出而在屏幕上不可见的内容, 当内容宽度小于元素宽度的时候,返回值同clientWidthclientHeight

IF1zwz.png

scrollTop 和 scrollLeft

该属性可以获取和设置一个元素的内容的垂直滚动或水平滚动的像素数, 当没有产生滚动条时,这两个属性的值都为 0

  • 如果一个元素不能被滚动(比如:元素没有溢出),则他们将被设置为 0

  • 如果设置的值 小于0,则他们的值会被设置为 0

  • 如果设置了超出这个容器可滚动的值,则他们将被设置为最大值

  • 该属性值会被四舍五入为一个整数

  • scrollTop和scrollLeft的值仅在存在滚动条的元素上有效,否则他们的值恒定为0

IFfmOz.png

getBoundingClientRect

Element.getBoundingClientRect()方法返回Element元素的大小及其相对视口的位置

x, y是该元素左上角相对于浏览器视口左上角的坐标

bottom, left,right, top是该元素相对于浏览器视口左上角的距离

width, height是该元素的宽度和高度

IF1O6S.png