一、offset系列
(1)offsetWidth=width+左右pandding+左右border(small:100+102+22=122,big:200+102+52=230)
(2)offsetHeight=content+上下pandding+上下border(small:150+102+22=172,big:200+102+52=230)
(3)offsetLeft(需参考其定位父元素,此处为给big对象设置定位,所以两者均以body为参考对象,结果如下small:big对象的margin-left + border-left + padding-left + small对象的margin-left=20+5+10+15=50)
//给大盒子设置定位的情况下。小盒子的offsetLeft以大盒子为基准,计算如下:offsetLeft=big对象的margin-left+small对象的padding-left:10+15=25
(4)offsetTop:与offsetLeft类似,需不断向上寻找参考的父级定位对象,若没有,则以body为参考。
二、client系列
(1)clientWidth:width+左右padding(没有border)
(2)clientHeight:height+上下padding
(3)clientLeft:在没有滚动条的情况下,仅为左边框的宽度
(4)clientTop:没有滚动条的情况下,仅为上边框宽度
三、scroll系列
(1)scrollWidth:当对象内内容为空或者没有超出容器时,其宽度则等同于clientWidth,否则为其内部内容的真实宽度
(2)scrollHeight:当对象内内容为空或者没有超出容器时,其高度则等同于clientHeight,否则为其内部内容的真实高度
(3)scrollLeft:可以理解成超出容器的那部分宽度
(4)scrollTop:同上,文本超出容器的那部分高度,浏览器间存在兼容性问题,可以使用:
document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop处理兼容性代码
四、事件中的部分属性
e.offsetX、e.offsetY:鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。
e.clientX、e.clientY:鼠标相对于浏览器可视区域的X,Y坐标,可视区域不包括工具栏和滚动条。
e.screenX、e.screenY:鼠标相对于显示器屏幕(screen)左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
补充:e.pageX、e.pageY:与e.clientX、e.clientY相类似,但是pageX和pageY是以页面为准,在有滚动的条件下,pageX/Y=clientX/Y+滚动的出去高度/宽度
<input type="button" value="点击" id="btn"><br>
<h3>small对象</h3>
<table>
<tr>
<td>offsetWidth:</td>
<td><input type="text" id="offsetW"></td>
<td>offsetHeight:</td>
<td><input type="text" id="offsetH"></td>
<td>offsetLeft:</td>
<td><input type="text" id="offsetL"></td>
<td>offsetTop:</td>
<td><input type="text" id="offsetT"></td>
</tr>
<tr>
<td>clientWidth:</td>
<td><input type="text" id="clientW"></td>
<td>clientHeight:</td>
<td><input type="text" id="clientH"></td>
<td>clientLeft:</td>
<td><input type="text" id="clientL"></td>
<td>clientTop:</td>
<td><input type="text" id="clientT"></td>
</tr>
<tr>
<td>scrollWidth:</td>
<td> <input type="text" id="scrollW"></td>
<td> scrollHeight:</td>
<td><input type="text" id="scrollH"></td>
<td>scrollLeft:</td>
<td><input type="text" id="scrollL"></td>
<td>scrollTop:</td>
<td><input type="text" id="scrollT"><br></td>
</tr>
</table>
<h3>big对象</h3>
<table>
<tr>
<td>offsetWidth:</td>
<td><input type="text" id="boffsetW"></td>
<td> offsetHeight:</td>
<td><input type="text" id="boffsetH"></td>
<td> offsetLeft:</td>
<td><input type="text" id="boffsetL"></td>
<td>offsetTop:</td>
<td><input type="text" id="boffsetT"></td>
</tr>
<tr>
<td>clientWidth:</td>
<td><input type="text" id="bclientW"></td>
<td>clientHeight:</td>
<td><input type="text" id="bclientH"></td>
<td>clientLeft:</td>
<td><input type="text" id="bclientL"></td>
<td> clientTop:</td>
<td><input type="text" id="bclientT"></td>
</tr>
<tr>
<td>scrollWidth:</td>
<td><input type="text" id="bscrollW"></td>
<td>scrollHeight:</td>
<td><input type="text" id="bscrollH"></td>
<td>scrollLeft:</td>
<td><input type="text" id="bscrollL"></td>
<td>scrollTop:</td>
<td><input type="text" id="bscrollT"></td>
</tr>
</table>
<h3>事件中的参数</h3>
<table>
<tr>
<th>e.offsetX:</th>
<th>e.offsetY:</th>
<th>e.clientX:</th>
<th>e.clientY:</th>
<th>e.screenX:</th>
<th>e.screenY:</th>
</tr>
<tr>
<td><input type="text" id="offsetX"></td>
<td><input type="text" id="offsetY"></td>
<td><input type="text" id="clientX"></td>
<td><input type="text" id="clientY"></td>
<td><input type="text" id="screenX"></td>
<td><input type="text" id="screenY"></td>
</tr>
</table>
<div id="big">
<div id="small"></div>
</div>
*{
margin: 0;
padding: 0;
}
#big{
width: 200px;
height:200px;
background-color: blue;
padding:10px;
margin: 20px;
border: 5px solid red;
}
#small{
width:100px;
height:150px;
background-color:pink;
padding:10px;
margin: 15px;
border: 1px solid red;
overflow: auto;
}`
window.οnlοad=function(){
function id$(ele){
return document.getElementById(ele);
}
var btn=document.getElementById("btn");
var small=document.getElementById("small");
var big=document.getElementById("big");
btn.οnclick=function(e){
id$("offsetH").value=id$("small").offsetHeight;
id$("offsetW").value=id$("small").offsetWidth;
id$("offsetT").value=id$("small").offsetTop;
id$("offsetL").value=id$("small").offsetLeft;
id$("clientH").value=id$("small").clientHeight;
id$("clientW").value=id$("small").clientWidth;
id$("clientT").value=id$("small").clientTop;
id$("clientL").value=id$("small").clientLeft;
id$("scrollH").value=id$("small").scrollHeight;
id$("scrollW").value=id$("small").scrollWidth;
id$("scrollT").value=id$("small").scrollTop;
id$("scrollL").value=id$("small").scrollLeft;
id$("boffsetW").value=id$("big").offsetWidth;
id$("boffsetH").value=id$("big").offsetHeight;
id$("boffsetT").value=id$("big").offsetTop;
id$("boffsetL").value=id$("big").offsetLeft;
id$("bclientH").value=id$("big").clientHeight;
id$("bclientW").value=id$("big").clientWidth;
id$("bclientT").value=id$("big").clientTop;
id$("bclientL").value=id$("big").clientLeft;
id$("bscrollH").value=id$("big").scrollHeight;
id$("bscrollW").value=id$("big").scrollWidth;
id$("bscrollT").value=id$("big").scrollTop;
id$("bscrollL").value=id$("big").scrollLeft;
id$("offsetX").value=e.offsetX;
id$("offsetY").value=e.offsetY;
id$("clientX").value=e.clientX;
id$("clientY").value=e.clientY;
id$("screenX").value=e.screenX;
id$("screenY").value=e.screenY;
}
}`