當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
JS 获取页面大小
使用JavaScript獲取頁(yè)面相關(guān)信息的寬度和高度
代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>html,body{margin: 0;padding: 0;}body{border: 10px solid blue;height: 800px;padding: 13px;}.one{border: 10px solid yellow; width: 1500px;height: 900px;}.two{border: 10px solid red;}</style> </head> <body><div class="one"><div class="two">ok</div></div><script>console.log("client",document.body.clientWidth,document.body.clientHeight);//寬：元素(這里是 body) content的寬度+ 元素(這里是 body) padding的寬度 (即 padding box的寬)//高：元素(這里是 body) content的高度+ 元素(這里是 body) padding的高度 (即 padding box的高)//本例中: //寬：元素(這里是 body) content=1303, 元素(這里是 body) padding=13+13=26, 所以 clientWidth=1329//高：元素(這里是 body) content=800 元素(這里是 body) padding=13+13=26, 所以 clientHeight=826 console.log("offset",document.body.offsetWidth,document.body.offsetHeight);//寬：元素(這里是 body) content的寬度+ 元素(這里是 body) padding的寬度+ 元素(這里是 body) border的寬度 (即 border box的寬)//高：元素(這里是 body) content的高度+ 元素(這里是 body) padding的高度+ 元素(這里是 body) border的高度 (即 border box的高)//元素(這里是 body)的content+元素(這里是 body)的padding+元素(這里是 body)的border的寬高//本例中: //寬：元素(這里是 body) content=1303, 元素(這里是 body) padding=13+13=26, 元素(這里是 body) border=10+10=20, 所以 offsetWidth=1349//高：元素(這里是 body) content=800 元素(這里是 body) padding=13+13=26, 元素(這里是 body) border=10+10=20,所以 clientHeight=846 console.log("scroll",document.body.scrollWidth,document.body.scrollHeight);//寬：元素(這里是 body) content里面內(nèi)容的實(shí)際的寬度+ 元素(這里是 body)里面 padding的寬度//高：元素(這里是 body) content里面內(nèi)容的實(shí)際的高度+ 元素(這里是 body)里面 padding的高度//如果元素(這里是 body)的實(shí)際內(nèi)容寬度和高度超過(guò) 元素(這里是 body)定義的寬度和高度,這時(shí)候就會(huì)出現(xiàn)滾動(dòng)條,//scrollWidth/scrollHeight 就和 clientWidth/clientHeight 的值不一樣//如果元素(這里是 body)的實(shí)際內(nèi)容寬度和高度不超過(guò) 元素(這里是 body)定義的寬度和高度,這時(shí)候就不會(huì)出現(xiàn)滾動(dòng)條,//scrollWidth/scrollHeight 就和 clientWidth/clientHeight 的值一樣//本例中: //寬：元素(這里是 body) content里面內(nèi)容的實(shí)際的寬度為 (內(nèi)容的 content寬)+(內(nèi)容的左 border寬)+(內(nèi)容的右 border寬) = 1500+10+10 // 元素(這里是 body)里面 padding的寬度為 13 , 所以 scrollWidth = 1500+10+10+13 = 1533//高：元素(這里是 body) content里面內(nèi)容的實(shí)際的高度為 (內(nèi)容的 content高)+(內(nèi)容的左 border高)+(內(nèi)容的右 border高) = 900+10+10, // 元素(這里是 body)里面 padding的高度為 13 , 所以 scrollWidth = 900+10+10+13 = 933 console.log("screen",window.screen.width,window.screen.height); //對(duì)應(yīng)屏幕分辨率的寬和高的像素//本例中：電腦設(shè)置的分辨率為 1366*768 console.log("screenavail",window.screen.availWidth,window.screen.availHeight); //寬：瀏覽器中可以使用的區(qū)域的寬度(除去電腦任務(wù)欄的寬度) //高：瀏覽器中可以使用的區(qū)域的高度(除去電腦任務(wù)欄的高度) //本例中：電腦設(shè)置的分辨率為 1366*768,高度為 40,寬度與設(shè)置的分辨率相同 1366,//但由于任務(wù)欄位于電腦屏幕下方,并沒(méi)有影響瀏覽器中可以使用的區(qū)域的寬度,所以 availWidth=1366, availHeight=768-40=728 </script> </body> </html>?
運(yùn)行結(jié)果：
屏幕中個(gè)個(gè)元素的大小：
body
?
div class="one"
?
div class="two"
?
輸出結(jié)果：
?
轉(zhuǎn)載于:https://www.cnblogs.com/go4it/p/10038537.html
與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖總結(jié)
- 上一篇： 6号团队-团队任务4：每日立会（2018
- 下一篇： Airflow 中文文档：概念