JS之元素大小高寬

offsetHeight和offsetWidth

偏移量,包括元素所有的可見高度或寬度,就是包括其內容+padding+邊框

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <style>
    .box {
      border: 20px solid black;
      width: 100px;
      height: 100px;
      padding: 20px;
      overflow-y: auto;
    }
  </style>
</head>

<body>
  <div class="box" data-customer="uy">
    這是一行
    這是一行
    這是一行
    這是一行
    這是一行
    這是一行
    這是一行
    這是一行
    這是一行
    這是一行
    這是一行
    這是一行
    這是一行
  </div>
 
  <script>
    // 這是一個高度100的box,上下邊框20+20,內上邊距+內下邊距20+20,所以offsetHeight=100+40+40=180,高度同理
    let offsetHeight=document.getElementsByClassName('box')[0].offsetHeight;
    let offsetWidth=document.getElementsByClassName('box')[0].offsetWidth
    console.log(`offsetHeight=${offsetHeight},offsetWidth=${offsetWidth}`)
  </script>
</body>

</html>

在這裏插入圖片描述
在這裏插入圖片描述
當前元素的的可見高度或寬度。那麼引入眼簾的就是一個黑邊框+裏面的內容。所以這裏的偏移量就是上下邊框(20+20)+內容(100)+上下內邊距(20+20)=180的offsetHeight

clientHeight和clientWidth

元素內容+邊距的高和寬。相較於offsetHeight和offsetWidth,少了邊框的寬度。
在這裏插入圖片描述

scrollHeight 和 scrollWidth

元素內容的總高度或總寬度

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章