瀏覽器和對象的dom屬性
1 DOM對象:var obj=document.getElementById(‘*‘);
obj.scrollWidth 是對象的實際內容的寬,不包邊線寬度,會隨對象中內容的多少改變(內容多了可能會改變對象的實際寬度)
obj.clientWidth 是對象看到的寬度(不含border)。
obj.offsetWidth 是對象看到的寬度(含border,如滾動條的占用的寬) ;
*~* offsetWidth的值總是比clientWidth的值大;
offsetLeft、offsetTop屬性:獲取元素相對於文檔左上角的坐標位置
標題:offsetTop 與 style.top 的區別
offsetTop 返回的是數字,而 style.top 返回的是字符串,除了數字外還帶有單位:px。
offsetTop 只讀,而 style.top 可讀寫。
如果沒有給 HTML 元素指定過 top 樣式,則 style.top 返回的是空字符串。
2 window對象:
1)innerHeight屬性:窗口中文檔顯示區域的高度,不包括菜單欄、工具欄等部分。該屬性可讀可寫。
IE不支持該屬性,IE中body元素的clientHeight屬性與該屬性相同。
(2)innerWidth屬性:窗口中文檔顯示區域的寬度,同樣不包括邊框。該屬性可讀可寫。
IE不支持該屬性,IE中body元素的clientWidth屬性與該屬性相同。
clientHeight與clientWidth屬性是只讀的。
另外,IE不支持outerWidth、outerHeight屬性。
(3)pageXOffset屬性:整數只讀屬性,表示文檔向右滾動過的像素數。
IE不支持該屬性,使用body元素的scrollLeft屬性替代。
(4)pageYOffset屬性:整數只讀屬性,表示文檔向下滾動過的像素數。
IE不支持該屬性,使用body元素的scrollTop屬性替代。
兼容IE與DOM瀏覽器,如何獲取窗口中文檔顯示區域的寬度及高度,使用?:條件語句,如下:
windows.innerWidth ? windows.innerWidth : document.body.clientWidth;
windows.innerHeight ? windows.innerHeight : document.body.clientHeight;
網頁可見區域寬: document.body.clientWidth;
網頁可見區域高: document.body.clientHeight;
網頁可見區域寬: document.body.offsetWidth (包括邊線的寬);
網頁可見區域高: document.body.offsetHeight (包括邊線的寬);
網頁正文全文寬: document.body.scrollWidth;
網頁正文全文高: document.body.scrollHeight;
網頁被卷去的高: document.body.scrollTop;
網頁被卷去的左: document.body.scrollLeft;
網頁正文部分上: window.screenTop;
網頁正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的寬: window.screen.width;
屏幕可用工作區高度: window.screen.availHeight;
屏幕可用工作區寬度:window.screen.availWidth;
瀏覽器和對象的dom屬性