<!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">
????????????????金樽清酒斗十千，玉盤(pán)珍羞直萬(wàn)錢(qián)。
????????????????<br><br>
????????????????停杯投箸不能食，拔劍四顧心茫然。
????????????????<br><br>
????????????????欲渡黃河冰塞川，將登太行雪滿(mǎn)山。
????????????????<br><br>
????????????????閑來(lái)垂釣碧溪上，忽復(fù)乘舟夢(mèng)日邊。
????????????????<br><br>
????????????????行路難！行路難！多歧路，今安在？
????????????????<br><br>
????????????????長(zhǎng)風(fēng)破浪會(huì)有時(shí)，直掛云帆濟(jì)滄海。
????????????????<br><br>
????????????????aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
????????????</div>
????????</div>
????</div>
<script>
????var?self?=?document.getElementById("self");
????//?client?獲取的是盒子可視的大小
????console.log(self.clientWidth);
????console.log(self.clientHeight);
????//?offset?獲取的是盒子的所占的大小(實(shí)際大小是?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?獲取的是盒子中內(nèi)容的真實(shí)高度
????console.log(self.scrollWidth);
????console.log(self.scrollHeight);
</script>
</body>
</html>I have a question! About...????對(duì)于clientHeight, offsetHeight, scrollHeight, 在控制臺(tái)得出的值, 我只能勉強(qiáng)知道offsetHeight的計(jì)算方式,?但是另外兩個(gè)是如何計(jì)算得到的呢, 因?yàn)榇嬖跐L動(dòng)條, 這樣的計(jì)算不太清楚, 懇求各路大神施以援手, 希望說(shuō)的通俗易懂又很詳細(xì)呢~
client,offset,scroll相關(guān)的計(jì)算疑問(wèn)?
專(zhuān)注程序不可自拔
2019-01-08 14:51:08