首先說一下js動(dòng)態(tài)獲取瀏覽器或頁(yè)面等容器的寬高的方法大體有哪些：

網(wǎng)頁(yè)可見區(qū)域?qū)挘?document.body.clientWidth
網(wǎng)頁(yè)可見區(qū)域高： document.body.clientHeight
網(wǎng)頁(yè)可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)
網(wǎng)頁(yè)可見區(qū)域高： document.body.offsetHeight (包括邊線的高)
網(wǎng)頁(yè)正文全文寬： document.body.scrollWidth
網(wǎng)頁(yè)正文全文高： document.body.scrollHeight
網(wǎng)頁(yè)被卷去的高： document.body.scrollTop
網(wǎng)頁(yè)被卷去的左： document.body.scrollLeft
網(wǎng)頁(yè)正文部分上： window.screenTop
網(wǎng)頁(yè)正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區(qū)高度： window.screen.availHeight
屏幕可用工作區(qū)寬度： window.screen.availWidth

 接著我們結(jié)合實(shí)例來(lái)實(shí)際說明一下：

有時(shí)候我們寫了100%高度的時(shí)候，然后因?yàn)槭钱?dāng)前頁(yè)面的子頁(yè)面，100%的只是父頁(yè)面，而子頁(yè)面有下拉條還有內(nèi)容的話，一些東西就不能都獲取到。

如下圖：

（我們?cè)O(shè)置了這個(gè)div id為“bg”的高度為100%，但下拉條內(nèi)容拉下去的時(shí)候，還是會(huì)發(fā)現(xiàn)這個(gè)背景高度只是父頁(yè)面的100%，里面子容器的內(nèi)容都沒有被這個(gè)黑色背景覆蓋到。）

所以在這種時(shí)候我們就要開始考慮給這個(gè)“bg”設(shè)置對(duì)應(yīng)的動(dòng)態(tài)高度。

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

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

然后我們?cè)賮?lái)看效果：

 好了，這樣整個(gè)頁(yè)面都可以被渲染到了。

以上所述是小編給大家介紹的js動(dòng)態(tài)獲取瀏覽器或頁(yè)面等容器的寬高詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論