学习过js的人,相信都曾经被这堆东西困扰:
clientWidth,clientHeight,clientX,clientY,offsetX.offsetY ,offsetLeft,offsetTop ,offsetWidth,offsetHeight,
scrollTop,scrollLeft 等等,看着这堆东西就开始犯晕呕吐。
他们到底是干嘛滴那?今天就来让我们彻底击碎这群玩意,看看它到底都是啥?看完之后,你会发现原来so easy!!妈妈再也不用担心你犯晕了!
clientWidth:代表浏览器可视区的宽
clientHeight:代表浏览器可视区的高
浏览器可视区宽高变化时,clientWidth和clientHeight也跟着变化
offsetWidth:获取物体自身的宽
offsetHeight: 获取物体自身的高(如果有padding和border值,那么包含padding和border值)
offsetLeft:获取的是相对于父对象的左边距
offsetTop :获取的是相对于父对象的上边距
scrollTop : 页面向上滚动的距离
scrollLeft :页面向左滚动的距离
scrollWidth: 可滚动区域的宽度
scrollHeight: 可滚动区域的高度
clientY:当鼠标事件发生时,鼠标相对于浏览器y轴的位置;
screenX:当鼠标事件发生时,鼠标相对于显示器屏幕x轴的位置;
screenY:当鼠标事件发生时,鼠标相对于显示器屏幕y轴的位置;
offsetX:当鼠标事件发生时,鼠标相对于事件源x轴的位置
offsetY:当鼠标事件发生时,鼠标相对于事件源y轴的位置
下面通过详细的案例测试,来说明每一个的含义
1. clientWidth:代表浏览器可视区的宽;clientHeight,:代表浏览器可视区的高
<script>
var clientW = document.documentElement.clientWidth || document.body.clientWidth;
var clientH = document.documentElement.clientHeight || document.body.clientHeight;
document.write('clientWidth= '+clientW + " -- clientHeight"+clientH);
</script>
当我们缩小浏览器窗口,clientWidht值和clientHeight的值也跟着改变了
2 .offsetWidth,offsetHeight: 获取物体自身的宽和高(有padding和border值,包含padding和border值)
<style>
#box{
width: 100px;height: 100px;
border: 2px solid #c00;
}
</style>
<body>
<div id="box"></div>
<script>
var oDiv = document.getElementById('box');
var divW = oDiv.offsetWidth;
var divH = oDiv.offsetHeight;
document.write('offsetWidth= '+divW + " -- offsetHeight"+divH);
/* var clientW = document.documentElement.clientWidth || document.body.clientWidth;
var clientH = document.documentElement.clientHeight || document.body.clientHeight;*/
</script>
</body>
加了
border
值
在加个padding值
#box{
width: 100px;height: 100px;
border: 2px solid #c00;
padding:5px;
}
3. offsetLeft:获取的是相对于父对象的左边距 ; offsetTop :获取的是相对于父对象的上边距
红色的box的父级是浏览器窗口,所以红色box的left和top是相对于浏览器窗口的左边距和上边距
而绿色的box的父级是红色的box,所以绿色box的left和top值是相对于红色box的左边距和上边距
<div id="box">
<div id="box2"></div>
</div>
<style>
*{padding: 0;margin: 0;}
#box{
position: relative;left: 100px;top: 100px;
width: 400px;height: 400px;
border: 2px solid #c00;
}
#box2{
width: 200px;height: 200px;
border: 2px solid #0f0;
position: absolute;
left: 50px;top: 50px;
}
</style>
<script>
var oBox = document.getElementById('box');
var oBox2 = document.getElementById('box2');
var boxL = oBox.offsetLeft;
var boxT = oBox.offsetTop;
var box2L = oBox2.offsetLeft;
var box2T = oBox2.offsetTop;
document.write(' box的offsetLeft= '+boxL + " --box的offsetTop="+boxT+"<br>");
document.write(' box2的offsetLeft= '+box2L + " --box2的offsetTop="+box2T);
</script>
4 .scrollTop : 页面向上滚动的距离
为了测试效果,我特意设定了5个width: 2000px;height: 400px的div,用不同的颜色区分了它们
有图可见:滚动条测量滚动条滚动的距离,只有70多px,而我们通过scrollTop获取到的值是400多px,可见scrollTop获取的是页面向上滚动了400多px,scrollLeft的也一样
<style>
*{padding: 0;margin: 0;}
.box{
/*position: relative;left: 100px;top: 100px;*/
width: 2000px;height: 400px;
}
.box1{background: green;}
.box2{background: blue;}
.box3{background: yellow;}
.box4{background: red;}
.box5{background: black;}
</style>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
window.onscroll = function () {
var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollT);
};
5. scrollLeft :页面向左滚动的距离
box1{background: green;width: 400px;height: 400px;}
box2{background: blue;width: 2000px;height: 400px;}
window.onscroll = function () {
var scrollW = document.documentElement.scrollWidth || document.body.scrollWidth;
var scrollH = document.documentElement.scrollHeight || document.body.scrollHeight;
console.log(scrollW+"---"+scrollH);
};