JavaScriptDOM元素尺寸和位置_基础知识

1.通过style内联获取元素的大小

代码如下:
var box = document.getElementById('box'); // 获得元素;
box.style.width; // 200px;
box.style.height; // 200px;

// PS:style获取只能取到行内style属性的CSS样式中的宽和高,如果有,则获取;如果没有则返回空;

2.通过计算获取元素的大小

代码如下:
var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentStyle;
style.width; // 200px;

// PS:通过计算获取元素的大小,无关是行内/内联或链接,它返回经过计算后的结果;
// 如果本身设置大小,它会返回元素的大小;如果本身没有设置,非IE会返回默认的大小,IE会返回auto;

3.通过CSSStyleSheet对象中的cssRules(或rules)属性获取元素的大小;
代码如下:
var sheet = document.styleSheets[0]; // 获取link或style;
var rule = (sheet.cssRules || sheet.rules)[0]; // 获取第一条规则;
rule.style.width; // 200px;

PS:cssRules只能获取到内联和链接样式的宽和高,不能获取到行内和计算后的样式;

总结:以上三种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:返回了元素大小,默认单位是px;如果没有设置任何CSS的width和height,它会得到计算后的宽度和高度;
PS:对于元素的实际大小,理解如下:
1.增加边框,最终值=原本大小+边框大小;220;
2.增加内边距,最终值=原本大小+内边距大小;220;
3.增加外边据,无变化;
4.增加滚动条,无变化,不会减小;

PS:对于元素大小的获取,一般是块级(block)元素并且已设置了CSS大小的元素较为方便;

三 获取元素周边大小

1.clientLeft和clientTop
// 这组属性可以获取元素设置了左边框和上边框的大小;
box.clientLeft; // 获取左边框的宽度;

2.offsetLeft和offsetTop(偏移量)

3.scrollTop和scrollLeft

四 getBoundingClientRect()方法

五 小结

1.偏移量(offset dimension):包括元素在屏幕上占用的所有可见的空间;
元素的可见大小由其高度和宽度决定,包括内边距/滚动条和边框;
2.客户区大小(client dimension):指的是元素内容及其内边距所占据的空间大小;
3.滚动大小(scroll dimension):包含滚动内容的元素的大小;

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com