整理下关于元素的属性：
clientHeight、clientWidth、clientLeft、clientTop
offsetHeight、offsetWidth、offsetLeft、offsetTop
scrollHeight、scrollWidth、scrollLeft、scrollTop
<html>
<head>
<title>call</title>
<style>
#box {
margin: 100px;
padding: 30px;
width: 300px;
height: 200px;
border: 15px solid green;
line-height: 30px;
font-size: 14px;
overflow: auto;
}
</style>
</head>
<body>
<div id="box">
有兴趣的同学，可以自行搜索雅虎关于前端优化的十四条规则。但这些规则当中，有多少是需要前端工程师付诸实践的？就我来说，CDN、缓存的设置，就是不需要我去关心的（作为一个苦逼外包，是没有权限去生产环境操作的）也就是说，一些优化的方法，可能只是需要前端工程师知道，说得难听点，就是应付面试，工作中遇不到。反而是一些工作中真正遇到的难题，面试中却很少被问到（纯属个人经验）。有些问题，同行们（包括我）可能稀里糊涂地用正确的方式解决了，但实际上，却并不知道自己为什么这样做。
</div>
<script>
window.onload = function () {
var box = window.document.getElementById('box');
//元素盒子模型
console.log(box.clientHeight); //260 就是css中定义的height + 上下padding
console.log(box.clientWidth); //360 就是css中定义的width + 左右padding
console.log(box.clientLeft); //15 就是border左边的宽度
console.log(box.clientTop); //15 就是border上边的高度
console.log(box.offsetHeight); //280 就是css中定义的height + 上下padding + 上下border
console.log(box.offsetWidth); //280 就是css中定义的width + 左右padding + 左右border
console.log(box.offsetLeft); //当前元素的左外边框距离父级参照物的左内边框的偏移量
console.log(box.offsetTop); //当前元素的上外边框距离父级参照物的上内边框的偏移量
console.log(box.scrollHeight); //真实内容的高度(包括溢出) + 上填充，如果没有溢出，等于box.clientHeight
console.log(box.scrollWidth); //真实内容的宽度(包括溢出) + 左填充，如果没有溢出，等于box.clientWidth
//获取到的结果是约等于值，因为是否设置overflow='hidden'对于最终结果都是有影响的
console.log(box.scrollLeft); //滚动条卷去的宽度
console.log(box.scrollTop); //滚动条卷去的高度
//获取/设置浏览器盒子模型的width/height/top/left，必须写两套
console.log(document.documentElement.clientHeight || document.body.clientHeight); //是当前浏览器可视窗口的高度（也就是一屏幕的高度，肉眼可看到的高度）
console.log(document.documentElement.clientWidth || document.body.clientWidth);//是当前浏览器可视窗口的宽度（也就是一屏幕的宽度，肉眼可看到的宽度）
console.log(document.documentElement.scrollHeight || document.body.scrollHeight); //是当前页面的真实高度
console.log(document.documentElement.scrollWidth || document.body.scrollWidth); //是当前页面的真实宽度
}
</script>
</body>
</html>
299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
