第一部分：原生JavaScript部分
1.clientWidth和clientHeight
描述：content + padding，不包含滚动条和border。
HTML：
<body>
<div id="test" class="test">
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
</div>
</body>
CSS：
<style>
body{
margin: 0;
padding: 0;
background-color: #f5f5d5;
}
.test{
width: 200px;
height: 200px;
margin: 100px;
padding: 20px;
background-color: #ccc;
border: 1px solid #000;
overflow: auto;
}
</style>
JavaScript：
<script>
window.onload = function() {
var tDiv = document.getElementById("test");
console.log("clientWidth:"+tDiv.clientWidth+" clientHeight:"+tDiv.clientHeight);
}
</script>
结果：
Paste_Image.png
2.offsetWidth和offsetHeight
描述：content + padding + border，包含滚动条。
HTML和CSS代码同上：
JavaScript：
<script>
window.onload = function() {
var tDiv = document.getElementById("test");
console.log("offsetWidth:"+tDiv.offsetWidth+" offsetHeight:"+tDiv.offsetHeight);
}
</script>
结果：
Paste_Image.png
3.scrollWidth和scrollHeight
描述：content(包含滚动区域) + padding，不包含滚动条和border。
HTML和CSS代码同上：
JavaScript：
<script>
window.onload = function() {
var tDiv = document.getElementById("test");
console.log("scrollWidth:"+tDiv.scrollWidth+" scrollHeight:"+tDiv.offsetHeight);
}
</script>
结果：
Paste_Image.png
总结：
- clientWidth = content + padding；
- offsetWidth = content + padding + border；
- scrollWidth = content(包含滚动区域) + padding。
这三个属性都是只读属性，只能取值，不能赋值。
4.clientLeft和clientTop
描述：对象的边框宽度。clientLeft为左边框宽度，clientTop为上边框宽度。
HTML和CSS代码同上：
JavaScript：
<script>
window.onload = function() {
var tDiv = document.getElementById("test");
console.log("clientLeft:"+tDiv.clientLeft+" clientTop:"+tDiv.clientTop);
}
</script>
结果：
Paste_Image.png
5.offsetLeft和offsetTop
补充：offsetParent：返回该对象带有定位的最近的父级元素，如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。
描述：offsetLeft和offsetTop分别为相对于offsetParent的左边距离和上边距离。
HTML和CSS代码同上：
JavaScript：
<script>
window.onload = function() {
var tDiv = document.getElementById("test");
console.log("offsetLeft:"+tDiv.offsetLeft+" offsetTop:"+tDiv.offsetTop);
}
</script>
结果：
Paste_Image.png
这里的div父级元素就是body，父级没有定位元素offsetParent就是body，而div的margin为100，所以div的offsetLeft和offsetTop都是100。
6.scrollLeft和scrollTop
描述：当对象内容超出其宽高的时候，元素被卷起的宽度和高度。
HTML和CSS代码同上：
JavaScript：
<script>
window.onload = function() {
var tDiv = document.getElementById("test");
tDiv.onscroll = function(){
console.log("scrollLeft:"+tDiv.scrollLeft+" scrollTop:"+tDiv.scrollTop);
};
}
</script>
结果：
Paste_Image.png
总结：
- clientLeft是对象的边框宽度；
- offsetLeft为相对于offsetParent的左边距离；
- scrollLeft为元素被卷起的宽度。
clientLeft和offsetLeft为只读属性，而scrollLeft可以取值，也可以赋值。
7.style.top，style.bottom，style.left，style.right
描述：进行CSS定位（position为absolute或relative）的对象才有的属性。
style.top和offsetTop的区别：
- offsetTop可以返回没有定位的元素距离上边的距离，而只有定位的元素才有style.top；
- offsetTop返回的值是纯数字，而style.top返回的值带有单位
px，所以是字符串；- offsetTop为只读属性，而style.top可读写；
- style.top只能获取行内样式设置的值，而offsetTop没有限制；
第二部分：Jquery部分
此处使用的jQuery版本为3.1.0
1.width()和height()
描述：content，不包含滚动条和padding以及border。
HTML和CSS代码同上：
JavaScript：
<script>
$(function(){
var $tDiv = $("#test");
console.log("width():"+$tDiv.width()+" height():"+$tDiv.height());
});
</script>
结果：
Paste_Image.png
2.innerWidth()和innerHeight()
描述：content + padding，不包含滚动条和border。
HTML和CSS代码同上：
JavaScript：
<script>
$(function(){
var $tDiv = $("#test");
console.log("innerWidth():"+$tDiv.innerWidth()+" innerHeight():"+$tDiv.innerHeight());
});
</script>
结果：
Paste_Image.png
3.outerWidth()和outerHeight()
描述：content + padding + border。
HTML和CSS代码同上：
JavaScript：
<script>
$(function(){
var $tDiv = $("#test");
console.log("outerWidth():"+$tDiv.outerWidth()+" outerHeight():"+$tDiv.outerHeight());
});
</script>
结果：
Paste_Image.png
总结：
- width() = content;
- innerWidth = content + padding;
- outerWidth = content + padding +border;
jQuery中的这三个属性不传参数就是取值，传参数就是赋值，详情见jQueryAPI。
4.offset()
描述：获取匹配元素在当前视口的相对偏移。
HTML:
<body>
<div class="container">
<div id="test" class="test">
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
</div>
</div>
</body>
CSS：
<style>
body{
margin: 0;
padding: 0;
background-color: #f5f5d5;
}
.container{
background-color: green;
width: 400px;
height: 400px;
margin: 50px;
position: relative;
}
.test{
position: absolute;
top: 30px;
left: 30px;
width: 200px;
height: 200px;
margin: 100px;
padding: 20px;
background-color: #ccc;
border: 1px solid #000;
overflow: auto;
}
</style>
JavaScript：
<script>
$(function(){
var $tDiv = $("#test");
console.log("offset().top:"+$tDiv.offset().top+" offset().left:"+$tDiv.offset().left);
});
</script>
结果：
Paste_Image.png
5.position()
描述：获取匹配元素相对父元素的偏移。（不包括margin）
HTML和CSS同上：
JavaScript：
<script>
$(function(){
var $tDiv = $("#test");
console.log("position().top:"+$tDiv.position().top+" position().left:"+$tDiv.position().left);
});
</script>
结果：
Paste_Image.png
6.scrollTop()和scrollLeft()
描述：获取匹配元素相对滚动条顶部和左侧的偏移。（其值等于原生js中的scrollTop和scrollLeft）
HTML和CSS同上：
JavaScript：
<script>
$(function(){
var $tDiv = $("#test");
$tDiv.on("scroll",function(){
console.log("scrollTop():"+$tDiv.scrollTop()+" scrollLeft():"+$tDiv.scrollLeft());
});
});
</script>
结果：
Paste_Image.png
网友评论