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
元素內容的總高度或總寬度