JavaScript中的各種寬高屬性的實現
在js中，存在著N多的關於高度和寬度的屬性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLeft、scrollTop、style.height、innerHeight、outerHeight、scree.height等等......這麼多，傻傻分不清也正常啊。
本文的目標：
- 理清js及jquery的各種width和height
- 對width和高度做一些實際的應用
window和document
首先我們來高清兩個概念：
- window和document的區別是什麼？
- window.location和document.location是一樣嗎？
第一個問題：
- 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
在通常情況下一樣，frame也是一樣
與window相關的寬高介紹
與window相關的寬高有一下幾個：
- window.innerWidth，通過字面意思我們知道這是一個內部的寬度
- window.innerHeight，內部的高度
- window.outWidth，外部的寬度
- window.outHeight，外部的高度
window.innerHeight和window.outHeight
我發現在Windows 10下Chrome和360安全瀏覽器不一樣、、、、（後面程式碼測試部分）
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）
我們再看下面的程式碼：
#mydiv{
width: 200px;
height: 200px;
background: red;
border: 1px solid #000;
overflow: auto;
}
在DIV中新增文字知道出現滾動軸，這時候
var mydiv = document.getElementById("mydiv");
console.log("mydiv.clientHeight=",mydiv.clientHeight); // 200
console.log("mydiv.clientWidth=",mydiv.clientWidth); // 183（減去了滾動條的寬度）
而在Mac系統下，滾動條不佔高度，這時候client的寬度還是200.
總結
- 假入無padding無滾動條，clientWidth=style.width
- 假如有padding無滾動軸，clientWidth=style.width+style.padding*2
- 假如有padding有滾動，且滾動是顯示的，clientWidth=style.width+style.padding*2-滾動軸寬度
clientLeft和clientTop
這兩個返回的是元素周圍邊框的厚度，如果不指定一個邊框或者不定位該元素，他的值就是0.
我們還是以body為例：
body{
border: 20px solid #000;
margin: 10px;
padding: 40px;
background: #eee;
height: 350px;
width: 500px;
overflow: scroll;
}
console.log(document.body.clientLeft); //20
console.log(document.body.clientTop); //20
這一對屬性是用來讀取元素的body的寬度和高度的
- clientTop=border-top的border-width
- clientLeft=border-left的border-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+margin*2+padding*2+border*2）
console.log("offsetHeight=",document.body.offsetHeight);
//470（width+margin*2+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
offsetLeft和offsetTop
這兩個屬性是基於offsetParent的，瞭解這兩個屬性我們必須先了解它，什麼是offsetParent呢？
- 如果當前元素的父級元素沒有進行CSS定位（position為absolute或relative）,offsetParent為border.
- 假如當前元素的父級元素中有CSS定位，offsetParent取最近的那個父級元素。
在IE6/7中：
offsetLeft=(offsetParent的padding-left)+(當前元素的margin-left)
在IE8/9/10及Chrome中：
offsetLeft=(offsetParent的margin-left)+(offsetParent的border寬度)+(offsetParentd的padding-left)+(當前元素的margin-left)
在FireFox中：
offsetLeft=(offsetParent的margin-left)+(當前元素的margin-left)+(offsetParent的padding-left)
、、、、看到這裡是不是已經懵逼了？、、、還是舉例子吧：
CSS:
body{
border: 20px solid #000;
margin: 10px;
padding: 40px;
background: #eee;
height: 350px;
width: 500px;
}
#mydiv{
width: 400px;
height: 200px;
padding: 20px;
margin :10px;
background: #f60;
border: 20px solid #888;
}
在IE8/910及Chrome中
mydiv.offsetLeft = 80
mydiv.offsetTop = 80
在火狐中
mydiv.offsetLeft = 60
mydiv.offsetTop = 60
在IE低版本IE6/7中是
mydiv.offsetLeft = 50
mydiv.offsetTop = 50
與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==實際內容的寬度+padding*2
scrollHeight==實際內容的高度+padding*2
scrollLeft和scrollTop
這對屬性是可讀寫（可被重新賦值） 的，指的是當元素其中的內容超出其寬高的時候，元素被捲起來的高和寬度。
obj.style.width和obj.style.height
對於一個dom元素，它的style屬性返回的是一個物件，這個物件中的任意一個屬性是可讀寫的，style.width等於CSS屬性中的寬度style.height等於CSS屬性中的高度。
Event物件的5種座標
哪五種座標？
- clientX和clientY，相對於瀏覽器（可是區左上角0,0）的座標
- screenX和screenY，相對於裝置螢幕左上角（0,0）的座標
- offsetX和offsetY，相對於事件源左上角（0,0）的座標
- pageX和pageY，相對於整個網頁左上角（0,0）的座標
- X和Y，本來是IE屬性，相對於用CSS動態定位的最內層包容元素
到此這篇關於JavaScript中的各種寬高屬性的實現的文章就介紹到這了,更多相關JavaScript 寬高屬性內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！