js獲取瀏覽器和屏幕的各種寬度高度
一：網(wǎng)頁可見區(qū)域?qū)捀?，不包括工具欄和滾動條（瀏覽器窗口可視區(qū)域大?。?/strong>
1.對于IE9+、chrome、firefox、Opera、Safari：
window.innerHeight瀏覽器窗口的內(nèi)部高度；
window.innerWidth瀏覽器窗口的內(nèi)部寬度；
2.對于IE8.7.6.5:
document.documentElement.clientHeight:表示HTML文檔所在窗口的當(dāng)前高度；
document.documentElement.clientWidth:表示HTML文檔所在窗口的當(dāng)前寬度；
或者，因為document對象的body屬性對應(yīng)HTML文檔的<body>標(biāo)簽，所以也可表示為：
document.body.clientHeight：表示HTML文檔所在窗口的當(dāng)前高度；
document.body.clientWidth：表示HTML文檔所在窗口的當(dāng)前寬度；
結(jié)論：
document.body.clientWidth/Height：的寬高偏小，高甚至默認(rèn)200；
document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的寬高始終相等。
所以在不同瀏覽器都實用的的Javascripit方案：
var w = document.documentElement.clientWidth || document.body.clientWidth; var h = document.documentElement.clientHeight || document.body.clientHeight;
二：網(wǎng)頁正文全文寬高
scrollWidth和scrollHeight獲取網(wǎng)頁內(nèi)容高度和寬度
1.針對IE.Opera：scrollHeight是網(wǎng)頁內(nèi)容實際高度，可以小于clientHeight;
2.針對NS.firefox：scrollHeight是網(wǎng)頁內(nèi)容高度，不過最小值是clientHeight;也就是說網(wǎng)頁內(nèi)容實際高度小于clientHeight的時候，scrollHeight返回clientHeight；
3.瀏覽器兼容代碼：
var w = document.documentElement.scrollWidth || document.body.scrollWidth; var h = document.documentElement.scrollHeight || document.body.scrollHeight;
二：網(wǎng)頁可見區(qū)域?qū)捀?，包括滾動條等邊線（會隨窗口的顯示大小改變）
1.值： offsetWidth = scrollWidth + 左右滾動條 +左右邊框；
offsetHeight = scrollHeight + 上下滾動條 + 上下邊框；
2.瀏覽器兼容代碼：
var w = document.documentElement.offsetWidth || document.body.offsetWidth ; var h = document.documentElement.offsetHeight || document.body.offsetHeight ;
三：網(wǎng)頁卷去的距離與偏移量
1.scrollLeft:設(shè)置或獲取位于給定對象左邊界與窗口中目前可見內(nèi)容的最左端之間的距離；
2.scrollTop:設(shè)置或獲取位于給定對象最頂端與窗口中目前可見內(nèi)容的最左端之間的距離；
3.offsetLeft:設(shè)置或獲取位于給定對象相對于版面或由offsetParent屬性指定的父坐標(biāo)的計算左側(cè)位置；
4.offsetTop:設(shè)置或獲取位于給定對象相對于版面或由offsetParent屬性指定的父坐標(biāo)的計算頂端位置；
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
JavaScript實現(xiàn)獲取圖片文件真實格式的示例代碼
每種格式的圖片，都有自己特有的優(yōu)缺點以及數(shù)據(jù)結(jié)構(gòu)，本篇博文的目的就是基于不同格式的圖像二進制數(shù)據(jù)，獲取到圖片的真實格式，感興趣的可以了解一下2023-02-02
getter使我們能夠?qū)傩越壎ǖ皆谠L問屬性時調(diào)用的函數(shù),而setter將屬性綁定到在嘗試設(shè)置屬性時調(diào)用的函數(shù),下面就跟隨小編來看看TypeScript中Getter/Setter的用法吧2024-10-10
微信小程序創(chuàng)建自定義全局函數(shù)以及其調(diào)用方法詳解
微信小程序有時需要函數(shù)里面調(diào)用函數(shù),下面這篇文章主要給大家介紹了關(guān)于微信小程序創(chuàng)建自定義全局函數(shù)以及其調(diào)用方法的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-09-09
用Javascript實現(xiàn)Sleep暫停功能代碼
ie和firefox都可以使用,有興趣可以試試2010-09-09
用javascript編寫的第一人稱射擊游戲...2007-02-02
深入淺出JS的Object.defineProperty()
這篇文章主要介紹了深入淺出JS的Object.defineProperty()，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下2022-06-06
解決js數(shù)據(jù)包含加號+通過ajax傳到后臺時出現(xiàn)連接錯誤
測試過程中發(fā)現(xiàn)js數(shù)據(jù)包含加號+通過ajax傳到后臺時出現(xiàn)連接錯誤,刪除+，鏈接暢通了，果然是這塊問題，對加號進行轉(zhuǎn)義2013-08-08
這篇文章主要介紹了Bootstrap菜單按鈕及導(dǎo)航的相關(guān)資料，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-09-09
javascript實現(xiàn)瀑布流動態(tài)加載圖片原理
這篇文章主要為大家詳細介紹了javascript實現(xiàn)瀑布流動態(tài)加載圖片原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
在本文中,我試圖以最簡潔的方式來闡明JavaScript編程原理中對象類型賦值和原生類型賦值之間的區(qū)別,以及它們各自是如何工作的,感興趣的朋友跟隨小編一起看看吧2023-09-09