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