如何使用js動態獲取瀏覽器或頁面等容器的寬高

這篇文章給大家分享的是有關如何使用js動態獲取瀏覽器或頁面等容器的寬高的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

首先說一下js動態獲取瀏覽器或頁面等容器的寬高的方法大體有哪些：

網頁可見區域寬： 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

 接著我們結合實例來實際說明一下：

有時候我們寫了100%高度的時候，然后因為是當前頁面的子頁面，100%的只是父頁面，而子頁面有下拉條還有內容的話，一些東西就不能都獲取到。

如下圖：

（我們設置了這個div id為“bg”的高度為100%，但下拉條內容拉下去的時候，還是會發現這個背景高度只是父頁面的100%，里面子容器的內容都沒有被這個黑色背景覆蓋到。）

所以在這種時候我們就要開始考慮給這個“bg”設置對應的動態高度。

在js中的初始化方法里寫如下代碼：

//定義id為bg的高度隨內容而變化
  var winHeight=0;
  winHeight=document.body.scrollHeight;
  document.getElementById("bg").style.height=winHeight+"px";
  
}

然后我們再來看效果：

 好了，這樣整個頁面都可以被渲染到了。

JavaScript的作用是什么

1、能夠嵌入動態文本于HTML頁面。2、對瀏覽器事件做出響應。3、讀寫HTML元素。4、在數據被提交到服務器之前驗證數據。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創建和修改等。7、基于Node.js技術進行服務器端編程。

感謝各位的閱讀！關于“如何使用js動態獲取瀏覽器或頁面等容器的寬高”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！