JavaScript DOM元素尺寸和位置
前端之家收集整理的这篇文章主要介绍了
JavaScript DOM元素尺寸和位置，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_403_0@
一 获取元素的CSS大小
@H_
403_0@1.通过style内联
获取元素的大小
@H_
403_0@<div class="codetitle">
<a style="CURSOR: pointer" data="99341" class="copybut" id="copybut99341" onclick="doCopy('code99341')"> 代码如下: <div class="codebody" id="code99341">
var
Box = document.getElementById('
Box'); // 获得元素;
Box.style.width; // 200px;
Box.style.height; // 200px;
@H_
403_0@// PS:style
获取只能取到行内style
属性的CSS样式中的宽和高,如果有,则
获取;如果没有则返回空;
@H_
403_0@
2.通过计算获取元素的大小
@H_
403_0@
Box,null) : null ||
Box.currentStyle;
style.width; // 200px;
// PS:通过计算
获取元素的大小,无关是行内/内联或
链接,它返回经过计算后的结果;
// 如果本身设置大小,它会返回元素的大小;如果本身没有设置,非IE会返回默认的大小,IE会返回auto;
@H_
403_0@
3.通过CSSStyleSheet对象中的cssRules(或rules)属性获取元素的大小;
获取link或style;
var rule = (sheet.cssRules || sheet.rules)[0]; //
获取第一条规则;
rule.style.width; // 200px;
PS:cssRules只能
获取到内联和
链接样式的宽和高,不能
获取到行内和计算后的样式;
@H_
403_0@总结:以上三种CSS
获取元素大小的
方法,只能
获取元素的CSS大小,却无法
获取元素本身实际的大小;比如
加上内边距/滚动条/边框之类的;
@H_
403_0@
二 获取元素实际大小
@H_
403_0@
1.clientWidth和clientHeight
@H_
403_0@这组
属性可以
获取元素可视区的大小,包含元素
内容及内边距所占据的空间大小;
Box.clientWidth; // 200;
PS:返回了元素大小,但没有单位,默认单位是px;
PS:对于元素的实际大小,clientWidth和clientHeight理解如下:
1.元素
增加边框,无变化,200;
2.元素
增加外边框,200;
3.
增加滚动条,最终值=原本大小-滚动条大小;184;
4.
增加内边距,最终值=原本大小+内边距大小;220;
PS:如果没有设置任何CSS的width和height,那么非IE会算上滚动条和内边距的计算后的大小;而IE则返回0;
@H_
403_0@
2.scrollWidth和scrollHeight
@H_
403_0@这组
属性可以
获取没有滚动条的情况下,元素
内容的总高度;
Box.scrollWidth;
// PS:返回了元素大小,默认单位是px;如果没有设置任何CSS的width和height,它会得到计算后的宽度和高度;
@H_
403_0@
3.offsetWidth和offsetHeight
@H_
403_0@这组
属性可以返回元素实际大小,包含边框/内边距和滚动条;
Box.offsetWidth; 200
PS:返回了元素大小,它会得到计算后的宽度和高度;
PS:对于元素的实际大小,理解如下:
1.
增加边框,最终值=原本大小+边框大小;220;
2.
增加内边距,最终值=原本大小+内边距大小;220;
3.
增加外边据,无变化;
4.
增加滚动条,不会减小;
@H_
403_0@PS:对于元素大小的
获取,一般是块级(block)元素并且已设置了CSS大小的元素较为方便;
@H_
403_0@
三 获取元素周边大小
@H_
403_0@
1.clientLeft和clientTop
// 这组
属性可以
获取元素设置了左边框和上边框的大小;
Box.clientLeft; //
获取左边框的宽度;
@H_
403_0@
2.offsetLeft和offsetTop(偏移量)
属性可以
获取当前元素边框相对于父元素边框的位置;
Box.offsetLeft; // 50;
// PS:
获取元素当前相对于父元素的位置,最好将它设置为定位position:absolute;
// PS:
加上边框和内边距不会影响它的位置,但
加上外边据会累加;
Box.offsetParent; // 得到父元素;
// PS:offsetParent中,如果本身父元素是
,非IE返回body对象,IE返回html对象;
// 如果两个元素嵌套,如果上级父元素没有使用定位position:absolute,那么offsetParent将返回body或html对象;
// 如果说在很多层次里,外层已经定位,获取任意一个元素距离页面上的位置,可以不停的向上回溯获取累加来实现;
Box.offsetTop+Box.offsetParent.offsetTop; // 只有两层的情况下;
// 如果多层的话,就必须使用循环或递归;
function offsetLeft(element){
var left = element.offsetLeft; // 得到第一层距离;
var parent = element.offsetParent; // 得到第一个父元素;
while(parent !== null){ // 判断如果还有上一层父元素;
left += parent.offsetLeft; // 将得到的距离累加;
parent = parent.offsetParent; // 将父元素也回溯;
} // 然后循环;
return left; // 得到最终距离;
}
@H_
403_0@
3.scrollTop和scrollLeft
属性可以
获取被滚动条隐藏的区域大小,也可设置定位到该区域;
Box.scrollTop; //
获取滚动
内容上方的位置;
// 设置滚动条滚动到最初始的位置;
function scrollStart(element){
if(element.scrollTop != 0){
element.scrollTop = 0;
}
}
@H_
403_0@
四 getBoundingClientRect()方法
方法返回一个矩形对象,包含四个
属性:left/top/right和bottom;
// 分别表示元素各边与
页面上边和左边的距离;
var
Box = document.getElementById('
Box');
alert(
Box.getBoundingClientRect().top); // 元素上边距离
页面上边的距离;
alert(
Box.getBoundingClientRect().right); // 元素右边距离
页面左边的距离;
alert(
Box.getBoundingClientRect().bottom); // 元素下边距离
页面上边的距离;
alert(
Box.getBoundingClientRect().left); // 元素左边距离
页面左边的距离;
// PS:IE/Firefox/Opera/Chrome/Safari都
支持;
// 但在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素;
document.documentElement.clientTop; // 非IE为0,IE为2;
document.documentElement.clientLeft; // 非IE为0,IE为2;
// 兼容getBoundingClientRect()
function getRect(element){
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left = document.documentElement.clientLeft;
return {
top:rect.top-top,// 元素上边距-
页面的上边距(0-0或2-2);
bottom:rect.bottom-top,left:rect.left-left,// 元素左边距-
页面的左边距(0-0或2-2);
right:rect.right-left
}
};
@H_
403_0@
五 小结
@H_
403_0@1.偏移量(offset dimension):
包括元素在屏幕上占用的所有可见的空间;
元素的可见大小由其高度和宽度决定,
包括内边距/滚动条和边框;
2.客户区大小(client dimension):指的是元素
内容及其内边距所占据的空间大小;
3.滚动大小(scroll dimension):包含滚动
内容的元素的大小;
