JS 獲取頁面大小
阿新 • • 發佈：2018-11-29
使用JavaScript獲取頁面相關資訊的寬度和高度
程式碼：
<!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的寬度 //高：body content的高度+ body padding的高度//本例中: //寬：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的寬度 //高：body content的高度+ body padding的高度+ body border的高度 //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裡面內容的實際的寬度+ body裡面 padding的寬度 //高：body content裡面內容的實際的高度+ body裡面 padding的高度 //如果body的實際內容寬度和高度超過 body定義的寬度和高度,這時候就會出現滾動條, //scrollWidth/scrollHeight 就和 clientWidth/clientHeight 的值不一樣 //如果body的實際內容寬度和高度不超過 body定義的寬度和高度,這時候就不會出現滾動條, //scrollWidth/scrollHeight 就和 clientWidth/clientHeight 的值一樣 //本例中: //寬：body content裡面內容的實際的寬度為 (內容的 content寬)+(內容的左 border寬)+(內容的右 border寬) = 1500+10+10 // body裡面 padding的寬度為 13 , 所以 scrollWidth = 1500+10+10+13 = 1533 //高：body content裡面內容的實際的高度為 (內容的 content高)+(內容的左 border高)+(內容的右 border高) = 900+10+10, // body裡面 padding的高度為 13 , 所以 scrollWidth = 900+10+10+13 = 933 console.log("screen",window.screen.width,window.screen.height); //對應螢幕解析度的寬和高的畫素 //本例中：電腦設定的解析度為 1366*768 console.log("screenavail",window.screen.availWidth,window.screen.availHeight); //寬：瀏覽器中可以使用的區域的寬度(除去電腦工作列的寬度) //高：瀏覽器中可以使用的區域的高度(除去電腦工作列的高度) //本例中：電腦設定的解析度為 1366*768,高度為 40,寬度與設定的解析度相同 1366, //但由於工作列位於電腦螢幕下方,並沒有影響瀏覽器的可以寬度,所以 availWidth=1366, availHeight=768-40=728 </script> </body> </html>
執行結果：
螢幕中個個元素的大小：
body
div class="one"
div class="two"
輸出結果：
