<!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 关注
- 921 浏览
添加回答
举报
0/150
提交
取消