一 获取元素的CSS大小
1.通过style内联获取元素的大小
// PS:style获取只能取到行内style属性的CSS样式中的宽和高,如果有,则获取;如果没有则返回空;
2.通过计算获取元素的大小
3.通过CSSStyleSheet对象中的cssRules(或rules)属性获取元素的大小;
总结:以上三种CSS获取元素大小的方法,只能获取元素的CSS大小,却无法获取元素本身实际的大小;比如加上内边距/滚动条/边框之类的;
二 获取元素实际大小
1.clientWidth和clientHeight
这组属性可以获取元素可视区的大小,包含元素内容及内边距所占据的空间大小; Box.clientWidth; // 200; PS:返回了元素大小,但没有单位,默认单位是px; PS:对于元素的实际大小,clientWidth和clientHeight理解如下: 1.元素增加边框,无变化,200; 2.元素增加外边框,200; 3.增加滚动条,最终值=原本大小-滚动条大小;184; 4.增加内边距,最终值=原本大小+内边距大小;220; PS:如果没有设置任何CSS的width和height,那么非IE会算上滚动条和内边距的计算后的大小;而IE则返回0;
2.scrollWidth和scrollHeight
这组属性可以获取没有滚动条的情况下,元素内容的总高度; Box.scrollWidth; // PS:返回了元素大小,默认单位是px;如果没有设置任何CSS的width和height,它会得到计算后的宽度和高度;
3.offsetWidth和offsetHeight
这组属性可以返回元素实际大小,包含边框/内边距和滚动条; Box.offsetWidth; 200 PS:返回了元素大小,它会得到计算后的宽度和高度; PS:对于元素的实际大小,理解如下: 1.增加边框,最终值=原本大小+边框大小;220; 2.增加内边距,最终值=原本大小+内边距大小;220; 3.增加外边据,无变化; 4.增加滚动条,不会减小;
PS:对于元素大小的获取,一般是块级(block)元素并且已设置了CSS大小的元素较为方便;
三 获取元素周边大小
1.clientLeft和clientTop
// 这组属性可以获取元素设置了左边框和上边框的大小; Box.clientLeft; // 获取左边框的宽度;2.offsetLeft和offsetTop(偏移量)
Box.offsetParent; // 得到父元素;
// PS:offsetParent中,如果本身父元素是
// 如果两个元素嵌套,如果上级父元素没有使用定位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; // 得到最终距离;
}
3.scrollTop和scrollLeft
// 设置滚动条滚动到最初始的位置;
function scrollStart(element){
if(element.scrollTop != 0){
element.scrollTop = 0;
}
}
四 getBoundingClientRect()方法
五 小结
1.偏移量(offset dimension):包括元素在屏幕上占用的所有可见的空间; 元素的可见大小由其高度和宽度决定,包括内边距/滚动条和边框; 2.客户区大小(client dimension):指的是元素内容及其内边距所占据的空间大小; 3.滚动大小(scroll dimension):包含滚动内容的元素的大小;
