offsetTop
獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算頂端位置。
offsetLeft
獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置。
offsetHeight
獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的高度。
IE、Opera 認為 offsetHeight = clientHeight + 滾動條 + 邊框。
NS、FF 認為 offsetHeight 是網頁內容實際高度,可以小于 clientHeight。
offsetWidth
獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的寬度。
offsetParent
獲取定義對象 offsetTop 和 offsetLeft 屬性的容器對象的引用。
clientHeight
獲取對象的高度,不計算任何邊距、邊框、滾動條或可能應用到該對象的補白。
大家對 clientHeight 都沒有什么異議,都認為是內容可視區域的高度,也就是說頁面瀏覽器中可以看到內容的這個區域的高度,一般是最后一個工具條以下到狀態欄以上的這個區域,與頁面內容無關。
clientLeft
獲取 offsetLeft 屬性和客戶區域的實際左邊之間的距離。
clientTop
獲取 offsetTop 屬性和客戶區域的實際頂端之間的距離。
clientWidth
獲取對象的寬度,不計算任何邊距、邊框、滾動條或可能應用到該對象的補白。
SCROLL屬性
scroll
設置或獲取滾動是否關閉。
scrollHeight
獲取對象的滾動高度。
scrollLeft
設置或獲取位于對象左邊界和窗口中目前可見內容的最左端之間的距離。
scrollTop
設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離。
scrollWidth
獲取對象的滾動寬度。event屬性
x
設置或獲取鼠標指針位置相對于父文檔的 x 像素坐標。
screenX
設置或獲取獲取鼠標指針位置相對于用戶屏幕的 x 坐標
offsetX
設置或獲取鼠標指針位置相對于觸發事件的對象的 x 坐標。
clientX
設置或獲取鼠標指針位置相對于窗口客戶區域的 x 坐標,其中客戶區域不包括窗口自身的控件和滾動條
我們這里說說四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋,這里說的是 document.body,如果是 HTML 控件,則又有不同。
這四種瀏覽器分別為IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。
clientHeight
大家對 clientHeight 都沒有什么異議,都認為是內容可視區域的高度,也就是說頁面瀏覽器中可以看到內容的這個區域的高度,一般是最后一個工具條以下到狀態欄以上的這個區域,與頁面內容無關。
offsetHeight
IE、Opera 認為 offsetHeight = clientHeight + 滾動條 + 邊框。 NS、FF 認為 offsetHeight 是網頁內容實際高度,可以小于 clientHeight。
scrollHeight
IE、Opera 認為 scrollHeight 是網頁內容實際高度,可以小于 clientHeight。 NS、FF 認為 scrollHeight 是網頁內容高度,不過最小值是 clientHeight。 簡單地說
clientHeight 就是透過瀏覽器看內容的這個區域高度。
NS、FF 認為 offsetHeight 和 scrollHeight 都是網頁內容高度,只不過當網頁內容高度小于等于 clientHeight 時,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 認為 offsetHeight 是可視區域 clientHeight 滾動條加邊框。scrollHeight 則是網頁內容實際高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同,只是把高度換成寬度即可。
但是
FF 在不同的 DOCTYPE 中對 clientHeight 的解釋不同, xhtml 1 trasitional 中則不是如上解釋的。其它瀏覽器則不存在此問題。
js獲取頁面高度
復制代碼 代碼如下:
<script>
function getInfo()
{
var s = "";
s += " 網頁可見區域寬:"+ document.body.clientWidth;
s += " 網頁可見區域高:"+ document.body.clientHeight;
s += " 網頁可見區域寬:"+ document.body.offsetWidth + " (包括邊線和滾動條的寬)";
s += " 網頁可見區域高:"+ document.body.offsetHeight + " (包括邊線的寬)";
s += " 網頁正文全文寬:"+ document.body.scrollWidth;
s += " 網頁正文全文高:"+ document.body.scrollHeight;
s += " 網頁被卷去的高(ff):"+ document.body.scrollTop;
s += " 網頁被卷去的高(ie):"+ document.documentElement.scrollTop;
s += " 網頁被卷去的左:"+ document.body.scrollLeft;
s += " 網頁正文部分上:"+ window.screenTop;
s += " 網頁正文部分左:"+ window.screenLeft;
s += " 屏幕分辨率的高:"+ window.screen.height;
s += " 屏幕分辨率的寬:"+ window.screen.width;
s += " 屏幕可用工作區高度:"+ window.screen.availHeight;
s += " 屏幕可用工作區寬度:"+ window.screen.availWidth;
s += " 你的屏幕設置是 "+ window.screen.colorDepth +" 位彩色";
s += " 你的屏幕設置 "+ window.screen.deviceXDPI +" 像素/英寸";
//alert (s);
}
getInfo();
</script>
在IE中:
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
在FireFox中:
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
在Opera中:
document.body.clientWidth ==> 可見區域寬度
document.body.clientHeight ==> 可見區域高度
document.documentElement.clientWidth ==> 頁面對象寬度(即BODY對象寬度加上Margin寬)
document.documentElement.clientHeight ==> 頁面對象高度(即BODY對象高度加上Margin高)
而如果沒有定義W3C的標準,則
IE為:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox為:
document.documentElement.clientWidth ==> 頁面對象寬度(即BODY對象寬度加上Margin寬)document.documentElement.clientHeight ==> 頁面對象高度(即BODY對象高度加上Margin高)
Opera為:
document.documentElement.clientWidth ==> 頁面對象寬度(即BODY對象寬度加上Margin寬)document.documentElement.clientHeight ==> 頁面對象高度(即BODY對象高度加上Margin高)
真是一件麻煩事情,其實就開發來看,寧可少一些對象和方法,不使用最新的標準要方便許多啊。
新聞熱點
疑難解答
圖片精選