DOM元素的尺寸和位置scrollTop等

Posted 2020-10-03 耿鑫

计算后的样式 行内、内联、链接样式都可以获取
<link rel="stylesheet" type="text/css" href="basic.css"/>
window.onload=function(){
var box=document.getElementById(‘box‘);
var style=window.getComputedStyle?window.getComputedStyle(box,null):null||box.currentStyle;
alert(style.width);
alert(style.height);
}
PS:通过计算获取元素的大小，无关你是否是行内、内联或者链接，它经过计算后得到的结果返回出来。如果本身设置大小
，它会返回元素的大小，如果本身没有设置，非IE浏览器会返回默认的大小，IE浏览器返回auto。

-----------------------------------------------------------------------------------------
使用CSSStyleSheet对象中的cssRules属性（rules）
basic.css
#box {
width:200px;
height:200px;
background:red;
}
window.onload=function(){
var box=document.getElementById(‘box‘);
var sheet=document.styleSheets[0];
var rule=(sheet.cssRules||sheet.rules)[0];
alert(rule.style.width);
alert(rule.style.height);
}
PS:cssRules(或rules)只能获取到内联和链接样式的宽和高，不能获取到行内和计算后的样式。

总结：以上的三种CSS获取元素大小的方法，只能获取元素的CSS大小，却无法获取元素本身实际的大小。比如加上了内边
距、滚动条、边框之类的。

-------------------------------------------------------------------------------------------
clientWidth 和 clientHeight

window.onload=function(){
var box=document.getElementById(‘box‘);
alert(box.clientWidth); //200
alert(box.clientHeight); //200 没有单位，但默认是px
//返回的数据类型是number，是数值，不是字符串了。
//如果设置了其它的单位，返回出来的结果还会转换为px像素

//边框和外边据，不算在clientWidth和clientHeight的实际大小里面
//内边距会增加大小，而滚动条会减少实际大小，不把滚动条的大小算进去
//在没有内边距和滚动条的情况下，没有设置CSS大小，IE浏览器会理解为0
}
-------------------------------------------------------------------------------------------
scrollWidth 和 scrollHeight 滚动实际大小
<div id="box"></div>
#box {
width: 200px;
height: 200px;
background:red;
border:10px solid black;
}
window.onload=function(){
var box=document.getElementById(‘box‘);
alert(box.scrollWidth); //200
alert(box.scrollHeight); //200 没有单位，但默认是px
//IE浏览器在指定的高度下获取scrollHeight会理解为获取有效内容的高度
}

PS:对于元素的实际大小，scrollWidth和scrollHeight理解如下：
1.增加边框，不同浏览器有不同解释：
a) Firefox和Opera浏览器会增加边框的大小，220x220
b)IE、Chrome和Safari浏览器会忽略边框大小，200x200
c)IE浏览器只显示它本来内容的高度。200x18
2.增加内边距，最终值会等于原本大小加上内边距大小，220x220，IE为220x38
3.增加滚动条，最终值会等于原本大小减去滚动条大小，184x184，IE为184x18
4.增加外边据，无变化。
5.增加内容溢出，Firefox、Chrome和IE获取实际内容高度，Opera比前三个浏览器获取的高度偏小，Safari比前三个浏览
器获取的高度偏大。

-------------------------------------------------------------------------------------------
offsetWidth 和 offsetHeight 兼容性特别好

1.增加边框，最终值会等于原本大小加上边框大小，为220；
2.增加内边距，最终值会等于原本大小加上内边距大小，为220；
3.增加外边据，无变化。
4.增加滚动条，无变化，不会减小

PS:对于元素大小的获取，一般是块级（block）元素并且以设置了CSS大小的元素较为方便。如果是内联元素(inline)或者
没有设置大小的元素就尤为麻烦，所以，建议使用的时候注意。

------------------------------------------------------------------------------------------
clientLeft和clientTop
这组属性可以获取元素设置了左边框和上边框的大小。
box.clientLeft; //获取左边框的长度
box.clientTop; //获取上边框的长度
PS：目前只提供了Left和Top这组，并没有提供Right和Bottom。如果四条边宽度不同的话，可以直接通过计算后的样式获
取，或者采用以上三组获取元素大小的减法求得。
-------------------------------------------------------------------------------------------
offsetLeft 和 offsetTop
这组属性可以获取当前元素相对于父元素的位置。子元素要设置position:absolute; top:50px; left:50px;

box.offsetLeft;
box.offsetTop;

PS: 获取元素当前相对于父元素的位置，最好将它设置为定位position:absolute;否则不同的浏览器会有不同的解释。
PS: 加上边框和内边距不会影响它的位置，但加上外边据会累加。

alert(box.offsetParent.tagName);
//IE浏览器理解的根上的父元素为html，非IE理解的根上的父元素为BODY，但问题不大

 

好几层的时候（好几个div）
alert(offsetTop(box))
function offsetTop(element){
var top=element.offsetTop;
var parent=element.offsetParent;
while(parent!==null){
top+=parent.offsetTop;
parent=parent.offsetParent;
}
return top;
}
-------------------------------------------------------------------------------------------
偏移
window.onload=function(){
var box=document.getElementById(‘box‘);
alert(box.scrollTop);
alert(box.scrollLeft);

box.scrollTop=34;
scrollStart(box);

}

function scrollStart(element){
if(element.scrollTop!=0){
element.scrollTop=0;
}
}

----------------------------------------------------------------------------------------------
getBoundingClientRect() 兼容，可以使用
#box{
width: 200px;
height: 200px;
background:red;
position:absolute;
top:50px;
left:50px;
}

window.onload=function(){
var box=document.getElementById(‘box‘);
alert(box.getBoundingClientRect().top);
alert(box.getBoundingClientRect().right);
alert(box.getBoundingClientRect().bottom);
alert(box.getBoundingClientRect().left);

alert(document.documentElement.clientTop+‘,‘+document.documentElement.clientLeft); //其它浏览器是0，0 IE
浏览器是2，2
//所以兼容处理
alert(getRect(box).top);
alert(getRect(box).right);
alert(getRect(box).bottom);
alert(getRect(box).left);
}

function getRect(element){
var rect=element.getBoundingClientRect();
var clientTop=document.documentElement.clientTop;
var clientLeft=document.documentElement.clientLeft;

return {
top:rect.top-clientTop,
bottom:rect.bottom-clientTop,
left:rect.left-clientLeft,
right:rect.right-clientLeft
};
}