當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

javascript 中的各种width,height属性整理

發布時間：2025/3/15 javascript 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 javascript 中的各种width,height属性整理小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

目標：

理清js及jquery的各種width和height

對象：

Window對象表示瀏覽器中打開的窗口；window對象可以省略。比如alert()、window.alert()。
Document對象是Window對象的一部分。那么document.body?我們可以寫成window.document.body；瀏覽器的HTML文檔成為Document對象。
window對象的location屬性引用的是Location對象，表示該窗口中當前顯示文檔的URL。
document的對象的location屬性也是引用了Location對象。(window.location === document.location;? //true)

與window相關的寬高有一下幾個：

window.innerWidth，通過字面意思我們知道這是一個內部的寬度

window.innerHeight，內部的高度

window.outerWidth，外部的寬度

window.outerHeight，外部的高度

　　　　window.innerHeight和window.outHeight

window.innerWidth和window.outWidth

掛靠在window下的寬高還有window.screen， window.screen包含有關用戶屏幕的信息。它包括：

window.screen.width
window.screen.height
window.screen.availHeight
window.screen.availWidth
window.screenTop
window.screenLeft

圖解

window相關寬高代碼演示

演示代碼：

console.log("innerWidth=",innerWidth); console.log("innerHeight=",innerHeight); console.log("outerWidth=",outerWidth); console.log("outerHeight=",outerHeight);

Chrome瀏覽器下效果

代碼：

console.info("screen.width=",screen.width); console.info("screen.height=",screen.height); console.info("screen.availWidth=",screen.availWidth); console.info("screen.availHeight=",screen.availHeight);

在Chrome瀏覽器下效果

window相關寬高瀏覽器兼容問題

innerHeight和outerHeight是不支持IE9以下版本的，而screen系列則不存在兼容問題。

document下面client相關寬高介紹

docment下有三類屬性：

與client相關的寬高

與offset相關的寬高

與scroll相關的寬高

與client相關的寬高

與client相關的寬高又有如下幾個屬性：

document.body.clientWidth
document.body.clientHeight
document.body.clientLeft
document.body.clientTop

clientWidth和clientHeight 該屬性指的是元素的可視部分寬度和高度，即padding+contenr。如果沒有滾動條，即為元素設定的高度和寬度。如果出現滾動條，滾動條會遮蓋元素的寬高，那么該屬性就是其本來寬高減去滾動條的寬高。

我們來看如下代碼：

body{border: 20px solid #000; margin: 10px; padding: 40px; background: #eee; height: 350px; width: 500px; overflow: scroll; } console.log(document.body.clientHeight); //430（padding*2+height） console.log(document.body.clientWidth); //580（padding*2+width）

與offset相關寬高介紹

與offset相關的寬高又有如下幾個屬性：

document.body.offsetWidth
document.body.offsetHeight
document.offsetLeft
document.offsetTop

offsetWidth與offsetHeight 這一對屬性指的是元素的border+padding+content的寬度和高度。

該屬性和其內部的內容是否超出元素大小無關，只和本來設定的border以及width和height有關。我們還是以body為例：

body{border: 20px solid #000; margin: 10px; padding: 40px; background: #eee; height: 350px; width: 500px; overflow: scroll; } console.log("offsetWidth=",document.body.offsetWidth); //620（width+padding*2+border*2） console.log("offsetHeight=",document.body.offsetHeight); //470（width+padding*2+border*2）

與scroll相關寬高介紹

與scroll相關的寬高屬性有如下幾個：

document.body.scrollWidth
document.body.scrollHeight
document.body.scrollLeft
document.body.scrollTop

scrollWidth和scrollHeight
document.body的scrollWidth和scrollHeight與div的scrollWidth和scrollHeight是有區別的。

我們先來看看document.body的scrollWidth和scrollHeight：

給定寬高小于瀏覽器窗口

scrollWidth通常是瀏覽器窗口的寬度
scrollHeight通常是瀏覽器窗口的高度

給定寬高大于瀏覽器窗口，且內容小于給定寬高

scrollWidth給定的寬度+其所有padding、margin和border
scrollHeight給定的高度+其所有的padding、margin和border

給定寬高大于瀏覽器窗口，且內容大于給定寬高

scrollWidth內容寬度+其所有的padding、margin和border
scrollHeight內容高度+其所有的padding、margin和border

再來看看在某div中scrollWidth和scrollHeight：

- 在無滾動軸的時候

scrollWidth==clientWidth=style.width+style.padding*2
在有滾動軸的時候

- scrollWidth==clientWidth=style.width+style.padding*2
- 在有滾動軸的時候

????????????

scrollWidth==實際內容的寬度+padding2
scrollHeight==實際內容的高度+padding2

ps.Event對象的5種坐標

哪五種坐標？

clientX和clientY，相對于瀏覽器（可是區左上角0,0）的坐標

screenX和screenY，相對于設備屏幕左上角（0,0）的坐標

offsetX和offsetY，相對于事件源左上角（0,0）的坐標

pageX和pageY，相對于整個網頁左上角（0,0）的坐標

X和Y，本來是IE屬性，相對于用CSS動態定位的最內層包容元素

<!DOCTYPE html> <html> <head><title>javascript height width test</title><style type="text/css">body { margin:0px;padding: 0px;width: 300px;border: 10px solid blue; }</style> </head> <body></body> <script type="text/javascript">document.write("innerHeight="+window.innerHeight);//瀏覽器可視高度document.write("innerWidth="+window.innerWidth+"<br>");//瀏覽器可視寬度document.write("outerHeight="+window.outerHeight);//瀏覽器實際高度document.write("outerWidth="+window.outerWidth+"<br>");//瀏覽器實際寬度document.write("clientHeight="+document.body.clientHeight);//content+padding*2 高度document.write("clientWidth="+document.body.clientWidth+"<br>");//content+padding*2 寬度//總結//?假入無padding無滾動條，clientWidth=style.width//?假如有padding無滾動軸，clientWidth=style.width+style.padding*2//?假如有padding有滾動，且滾動是顯示的，clientWidth=style.width+style.padding*2-滾動軸寬度document.write("clientLeft="+document.body.clientLeft);document.write("clientTop="+document.body.clientTop+"<br>");//素周圍邊框的厚度，如果不指定一個邊框或者不定位該元素，他的值就是0document.write("offsetHeight="+document.body.offsetHeight);//content+padding*2+border*2 高度document.write("offsetWidth="+document.body.offsetWidth);//content+padding*2+border*2 寬度// 總結//?假如無padding無滾動條無border： ?offsetWidth=clientWidth=style.width//?假如有padding無滾動條有border： ?offsetWidth=style.width+style.padding2+(border-width)2//?offsetWidth=clientWidth+border寬度*2//?假如有padding有滾動條，且滾動條是顯示的，有border： ?offsetWidth=style.width+style.padding2+(border-width)2//?offsetWidth=clientWidth+滾動條寬度+border寬度*2</script> </html>

轉載于:https://www.cnblogs.com/w-y-y/p/7083119.html

總結

以上是生活随笔為你收集整理的javascript 中的各种width,height属性整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。