元素尺寸
clientWidth[Height]
元素的可視區域大小，計算公式：width[height]+padding(如果有滾動條，要減去滾動條的寬度17px)
文檔的可視區域大小會隨著瀏覽器窗口的大小變化而變化，文檔可視區域的獲?。?/p>
document.documentElement.clientWidth;
document.documentElement.clientHeight;
offsetWidth[Height]
元素的占位大小，計算公式：width[height]+padding+border(不包括滾動條)
scrollWidth[Height]
內容的寬高，計算公式：width[height]+padding
如果div里面的內容超過父div，并且設置了overflow:hidden;則可以用scrollHeight獲取內容的高度，下面div#inner的scrollHeight的計算公式為：樣式高+padding-top
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style type="text/css">
#inner{
width:100px;height:100px;border: 1px solid red; overflow: hidden; padding: 10px;
}
.content{
height: 600px;width: 90px; background: red;
}
</style>
</head>
<body style="height:2000px;">
<div id="inner" >
<div class="content">內容</div>
</div>
<script>
var oDiv = document.getElementById('inner');
console.log(oDiv.scrollHeight);
</script>
</body>
</html>
scrollTop[Left]
滾動距離。
瀏覽器滾動距離的獲取
document.documentElement.scrollTop; //非chrome瀏覽器
document.body.scrollTop; //只針對chrome瀏覽器
window.pageYOffset;
浙公網安備 33010602011771號