JavaScript学习总结--元素尺寸，位置
作者：互联网
在JavaScript的学习过程中遇到了一些获得元素或事件或窗口位置的属性，如offsetLeft,offsetWidth,offsetX,clientWidth。对于初学者的我来讲主要坑有两点：
- 混淆这些属性的作用，如offsetWidth与clientWidth差别就差一个border.
- 哪些是元素的属性，哪些是事件的？
本文主要介绍总结了我学习中遇到的元素尺寸，位置相关属性，下一篇介绍event事件的鼠标尺寸。
元素的尺寸，位置相关：
element.offsetLeft
element.offsetTop
element.clientWidth
element.clientHeight
element.offsetWidth
element.offsetHeight
offsetLeft和offsetTop通俗的说：元素的边框外到自己offsetParent的边框内的距离的距离。那offsetParent是谁呢？这里高级浏览器和IE6,7不同。
高级浏览器如Chrome,IE9,IE9+等指离自己最近的定位的祖先元素，如果祖先元素都没有定位，则offsetParent为body。如图，绿色盒子定位了，则最里侧的黄色盒子的offsetLeft和offsetTop为图中红色箭头标注的距离。
在IE8中，offsetParent与高级浏览器相同，但是offsetLeft与offsetTop的计算方式略有不同，IE8中会把offsetParent的边框算进去。如图，如果最内部的黄色盒子的offsetParent是绿色盒子，则它的offsetLeft和offsetTop为图中红色箭头标注的距离。
IE6,7中，offsetParent与高级浏览器不同，这里分两种情况：
- 定位了的元素的offsetParent与高级浏览器一样。
- 没有定位的元素的offsetParent为离自己最近的有Width或Height的元素。
clientWidth和clientHeight, offsetWidth和offsetHeight 基本没有兼容问题。
clientWidth和clientHeight：就是指盒子的Width+padding-left+padding-right和Height+padding-top+padding-bottom
offsetWidth和offsetHeight : 就是指盒子的Width+padding-left+padding-right+border和Height+padding-top+padding-bottom+border
如果盒子没有宽度，clientWidth和 offsetWidth显示为当前浏览器的宽度，会随着浏览器窗口大小改变而改变。如果盒子没有高度，则clientHeight和offsetHeight为0。下图为调整浏览器宽度后，box4和box5的clientWidth，offsetWidth，clientHeight，offsetHeight情况。box4和box5都没有设置宽度，box4内有文字，box5为空盒子。(box4和box5详情见最后代码)。
特别的，当盒子是用文字撑起来的时候，一般浏览器clientHeight和offsetHeight为文字撑起的高度，而IE6的clientHeight为0。
下图是代码中box2的盒模型示例。
上面元素的属性可以用下面代码在不同浏览器中进行验证。
<style>
*{
margin: 0;
padding: 0;
}
.box3{
width: 100px;
height: 100px;
border: 25px solid gold;
}
.box2{
width: 200px;
height: 200px;
padding: 50px;
border: 50px solid yellowgreen;
position: relative;
}
.box1{
width: 400px;
height: 400px;
padding: 50px;
border: 50px solid orange;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box1" id="b1">
<div class="box2" id="b2">
<div class="box3" id="b3"></div>
</div>
</div>
<div class="box4" id="b4">
大家好，我是web初学者Peger,希望大家多多指教！
大家好，我是web初学者Peger,希望大家多多指教！
大家好，我是web初学者Peger,希望大家多多指教！
大家好，我是web初学者Peger,希望大家多多指教！
</div>
<div class="box5" id="b5">
</div>
<script>
var b1=document.getElementById("b1");
var b2=document.getElementById("b2");
var b3=document.getElementById("b3");
var b4=document.getElementById("b4");
var b5=document.getElementById("b5");
console.log(b1.offsetLeft);
console.log(b2.offsetLeft);
console.log(b3.offsetLeft);
console.log(b1.offsetWidth);
console.log(b2.offsetWidth);
console.log(b3.offsetWidth);
console.log(b1.clientWidth);
console.log(b2.clientWidth);
console.log(b3.clientWidth);
console.log("b4 clientW:"+b4.clientWidth);
console.log("b4 clientH:"+b4.clientHeight);
console.log("b5 clientW:"+b5.clientWidth);
console.log("b5 clientH:"+b5.clientHeight);
console.log("b4 offsetW:"+b4.offsetWidth);
console.log("b4 offsetH:"+b4.offsetHeight);
console.log("b5 offsetW:"+b5.offsetWidth);
console.log("b5 offsetH:"+b5.offsetHeight);
</script>
标签：padding,JavaScript,console,log,元素,clientWidth,b5,尺寸,offsetWidth 来源： https://blog.csdn.net/ypp521/article/details/89313012