<!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>distance</title>
????<style>
????????html,body{margin:?0;padding:?0;}
????????.grandfather{width:?600px;height:?600px;position:?relative;left:?50px;top:?50px;border:?5px?solid?#c1c1c1;}
????????.father{width:?450px;height:?450px;position:?absolute;???top:?50px;left:?50px;border:?10px?solid?#d1d1d1;}
????????.self{width:?200px;height:?200px;margin:?50px;padding:?20px;border:?10px?solid?#b1b1b1;background-color:?skyblue;/*?中文不換行?*/white-space:nowrap;overflow:?auto;}
????</style>
</head>
<body>
????<br><br><br><br>
????<div?class="grandfather">
????????<div?class="father">
????????????<div?class="self"?id="self">
????????????????金樽清酒斗十千，玉盤珍羞直萬錢。
????????????????<br><br>
????????????????停杯投箸不能食，拔劍四顧心茫然。
????????????????<br><br>
????????????????欲渡黃河冰塞川，將登太行雪滿山。
????????????????<br><br>
????????????????閑來垂釣碧溪上，忽復乘舟夢日邊。
????????????????<br><br>
????????????????行路難！行路難！多歧路，今安在？
????????????????<br><br>
????????????????長風破浪會有時，直掛云帆濟滄海。
????????????????<br><br>
????????????????aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
????????????</div>
????????</div>
????</div>
<script>
????var?self?=?document.getElementById("self");
????//?client?獲取的是盒子可視的大小
????console.log(self.clientWidth);
????console.log(self.clientHeight);
????//?offset?獲取的是盒子的所占的大小(實際大小是?border+?padding+?width/height)
????console.log(self.offsetWidth);??????//260=200+2*20+2*10
????console.log(self.offsetHeight);?????//260=200+2*20+2*10
????//??scroll?獲取的是盒子中內容的真實高度
????console.log(self.scrollWidth);
????console.log(self.scrollHeight);
</script>
</body>
</html>I have a question! About...????對于clientHeight, offsetHeight, scrollHeight, 在控制臺得出的值, 我只能勉強知道offsetHeight的計算方式,?但是另外兩個是如何計算得到的呢, 因為存在滾動條, 這樣的計算不太清楚, 懇求各路大神施以援手, 希望說的通俗易懂又很詳細呢~
2 回答
- 2 回答
- 0 關注
- 957 瀏覽
添加回答
舉報
0/150
提交
取消