整理下关于元素的属性:
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>