javascript 中的各种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.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瀏覽器下效果
代碼：
在Chrome瀏覽器下效果
?
window相關寬高瀏覽器兼容問題
innerHeight和outerHeight是不支持IE9以下版本的，而screen系列則不存在兼容問題。
document下面client相關寬高介紹
docment下有三類屬性：
與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種坐標
哪五種坐標？
?
轉載于:https://www.cnblogs.com/w-y-y/p/7083119.html
總結
以上是生活随笔為你收集整理的javascript 中的各种width,height属性整理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： URI 和 URL
- 下一篇： JS组件系列——自己动手扩展Bootst