国产成人啪精品视频站午夜,91人妻中文字幕无码专区在线

JavaScript中頁面和塊高度的屬性總結

作者：西西點擊：0次評論：0次標簽：屬性

類型：修改器(游戲工具)大小：342KB語言：中文評分：5.3
標簽：

立即下載

經�？吹接腥税俣葹槭裁碿liengHeihgt獲取的值為0，clientHeight與offsetHeight到底哪里不一樣，為什么遇到這樣問題的時候你總是感到迷惘呢，究其原因是對他們的屬性不認識造成的，當我們創(chuàng)建HTML頁面時候對于一個元素的寬度通常我們會指定他多大（以百分比或以像素為單位），但高度往往可以有所不同，這取決于你的內容。與塊的高度相關聯(lián)的常見問題是：向下滾動到特定的地方高度是多少；元素的絕對位置，;一個塊相對于另一個塊的高度等。在這種情況下CSS并不總是有幫助，特別是如果頁面是動態(tài)的，這個時候使用javascript來獲取他們的值是非常有幫助的

頁面高度

設置窗口對象的高度的方法：

屬性	描述
innerHeight（innerWidth）	設置窗口的內容區(qū)域的高度
outerHeight（outerWidth）	設置窗口高度
screen.availHeight（screen.availWidth）	高度，以像素為單位的工作區(qū)屏幕大小（不含工具欄的高度）
screen.height（screen.width）	屏幕的高度（以像素為單位）
screenY（screenX）	從屏幕頂部到瀏覽器窗口的上邊界的距離
scrollY（scrollX）	文檔垂直滾動的距離
pageYOffset（pageXOffset）	頁面的當前垂直位置相對于窗口角最上方左側

請注意，第一并非所有的瀏覽器都支持，第二，并非所有的屬性值一致。另外，不要忘記，這些都是針對窗口對象中的所有屬性，這意味著它們只適用于窗口對象，所以你不能這樣寫document.getElementById（ID）.innerHeight等但是，在測試過程中（IE 6, FF 2.0, Opera 9.25)），結果發(fā)現(xiàn)，所有的瀏覽器只支持window.screen.availHeight和 window.screen.height（見下面匯總表）。但是，在大多數(shù)情況下，這是不夠的，它往往是要知道塊或容器的高度，所以你應該尋找其他方式

屬性	描述
clientHeight（clientWidth）	沒有滾動條的高度
scrollHeight（scrollWidth）	包括滾動條的高度
scrollTop（scrollLeft）	當前位置相對于該塊的上邊界的垂直位移
offsetHeight（offsetWidth）	對象的可見寬度，包滾動條等邊線，會隨窗口的顯示大小改變

重要注意事項：這些屬性需要在頁面完全加載后才能使用，否則可能會有所不同，為什么呢？看下面的表...

匯總表

屬性	沒有定義DOCTYPE	定義了！!DOCTYPE XHTML 1.0 Transitional
ie瀏覽器（6）	FF（2.0）	Opera（9.25）	ie瀏覽器（6）	FF（2.0）	Opera（9.25）
window.innerHeight	未定義	807	848	未定義	807	848
window.outerHeight	未定義	979	911	未定義	979	911
window.screen.availHeight	971	971	971	971	971	971
window.screen.height	1024	1024	1024	1024	1024	1024
window.screenY	未定義	-4	-23	未定義	-4	-23
window.scrollY	未定義	變化取決于從滾動	未定義	未定義	變化取決于從滾動	未定義
window.pageYOffset	未定義	變化取決于從滾動	變化取決于從滾動	未定義	變化取決于從滾動	變化取決于從滾動
document.body.clientHeight	846	807	848	3196	3124	3136
document.body.scrollHeight	3252	3202	3166	3196	3124	3136
document.body.scrollTop	變化取決于從滾動	變化取決于從滾動	變化取決于從滾動	0	0	0
document.documentElement.scrollTop	0	0	0	變化取決于從滾動	變化取決于從滾動	變化取決于從滾動
document.body.offsetHeight	850	3192	848	3196	3124	3136
的document.getElementById（this_tbl）.clientHeight	361	371	361	361	370	361
的document.getElementById（this_tbl）.scrollHeight	361	371	361	361	370	361
的document.getElementById（this_tbl）.offsetHeight	361	371	361	361	370	361

測試在您的瀏覽器（刷新頁面點擊下面refresh按鈕就行測試）

window.innerHeight		916
window.outerHeight		1020
window.screen.availHeight		1020
window.screen.height		1050
window.screenY		0
window.scrollY		0
window.pageYOffset		0
document.body.clientHeight		975
document.body.scrollHeight		2412
document.body.scrollTop		0
document.documentElement.scrollTop		0
document.body.offsetHeight		975
document.getElementById(tbl).clientHeight		421
document.getElementById(tbl).scrollHeight		421
document.getElementById(tbl).offsetHeight		421