JavaScript DOM元素尺寸與位置_基礎知識
- WBOY原創
- 2016-05-16 16:04:331264瀏覽
一 取得元素的CSS大小
1.透過style內聯取得元素的大小
var box = document.getElementById('box'); // 取得元素;
box.style.width; 地 box.style.height; ///200px;
2.透過計算取得元素的大小
style.width;
// PS:透過計算取得元素的大小,無關是行內/內聯或連結,它傳回經過計算後的結果;
3.透過CSSStyleSheet物件中的cssRules(或rules)屬性取得元素的大小;
rule.style.width;
PS:cssRules只能取得到內聯和連結樣式的寬和高,不能取得到行內和計算後的樣式;
總結:以上三種CSS取得元素大小的方法,只能取得元素的CSS大小,卻無法取得元素本身實際的大小;例如加上內邊距/捲軸之類的;
二 取得元素實際大小
1.clientWidth和clientHeight
這組屬性可以取得元素視覺區的大小,包含元素內容及內邊距所佔據的空間大小;
box.clientWidth;
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;
PS:回傳了元素大小,預設單位是px;如果沒有設定任何CSS的width和height,它會得到計算後的寬度和高度;
PS:對於元素的實際大小,理解如下:
1.增加邊框,最終值=原本大小 邊框大小;220;
2.增加內邊距,最終值=原本大小 內邊距大小;220;
3.增加外邊據,無變化;
4.增加捲軸,無變化,不會減少;
PS:對於元素大小的取得,一般是區塊級(block)元素且已設定了CSS大小的元素較為方便;
1.clientLeft和clientTop
// 這組屬性可以取得元素設定了左邊框和上邊框的大小;
box.clientLeft;
2.offsetLeft和offsetTop(偏移量)
// 这组属性可以获取当前元素边框相对于父元素边框的位置;
box.offsetLeft; // 50;
// PS:获取元素当前相对于父元素的位置,最好将它设置为定位position:absolute;
// PS:加上边框和内边距不会影响它的位置,但加上外边据会累加;
box.offsetParent; // 得到父元素;
// PS:offsetParent中,如果本身父元素是<body>,非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; // 得到最终距离;
}
3.scrollTop和scrollLeft
// 这组属性可以获取被滚动条隐藏的区域大小,也可设置定位到该区域;
box.scrollTop; // 获取滚动内容上方的位置;
// 设置滚动条滚动到最初始的位置;
function scrollStart(element){
if(element.scrollTop != 0){
element.scrollTop = 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
}
};五 小結1.偏移量(offset dimension):包括元素在螢幕上所佔用的所有可見的空間; 元素的可見大小由其高度和寬度決定,包括內邊距/捲軸和邊框;
2.客戶區大小(client dimension):指的是元素內容及其內邊距所佔據的空間大小;
3.滾動大小(scroll dimension):包含滾動內容的元素的大小;