這篇文章主要講解了JavaScript中如何實(shí)現(xiàn)各種寬高屬性，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。
目前創(chuàng)新互聯(lián)公司已為上千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、裕安網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
在js中，存在著N多的關(guān)于高度和寬度的屬性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLeft、scrollTop、style.height、innerHeight、outerHeight、scree.height等等......這么多，傻傻分不清也正常啊。
本文的目標(biāo)：
window和document
首先我們來(lái)高清兩個(gè)概念：
第一個(gè)問(wèn)題：
重慶分公司
重慶分公司
document.body 我們可以寫(xiě)成window.document.body；瀏覽器的HTML文檔成為Document對(duì)象。第二問(wèn)題：
window對(duì)象的location屬性引用的是Location對(duì)象，表示該窗口中當(dāng)前顯示文檔的URL。
document的對(duì)象的location屬性也是引用了Location對(duì)象。
那意思是：
window.location === document.location; //true
在通常情況下一樣，frame也是一樣
與window相關(guān)的寬高介紹
與window相關(guān)的寬高有一下幾個(gè)：
window.innerHeight和window.outHeight
我發(fā)現(xiàn)在Windows 10下Chrome和360安全瀏覽器不一樣、、、、（后面代碼測(cè)試部分）
window.innerWidth和window.outWidth
掛靠在window下的寬高還有window.screen， window.screen包含有關(guān)用戶屏幕的信息。它包括：
圖解
window相關(guān)寬高代碼演示
演示代碼：
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瀏覽器下效果
.jpg)
window相關(guān)寬高瀏覽器兼容問(wèn)題
innerHeight和outerHeight是不支持IE9以下版本的，而screen系列則不存在兼容問(wèn)題。
document下面client相關(guān)寬高介紹
docment下有三類(lèi)屬性：
與client相關(guān)的寬高
與client相關(guān)的寬高又有如下幾個(gè)屬性：
clientWidth和clientHeight
該屬性指的是元素的可視部分寬度和高度，即padding+contenr。
如果沒(méi)有滾動(dòng)條，即為元素設(shè)定的高度和寬度。
如果出現(xiàn)滾動(dòng)條，滾動(dòng)條會(huì)遮蓋元素的寬高，那么該屬性就是其本來(lái)寬高減去滾動(dòng)條的寬高。
我們來(lái)看如下代碼：
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）我們?cè)倏聪旅娴拇a：
#mydiv{
width: 200px;
height: 200px;
background: red;
border: 1px solid #000;
overflow: auto;
}在DIV中添加文字知道出現(xiàn)滾動(dòng)軸，這時(shí)候
var mydiv = document.getElementById("mydiv");
console.log("mydiv.clientHeight=",mydiv.clientHeight); // 200
console.log("mydiv.clientWidth=",mydiv.clientWidth); // 183（減去了滾動(dòng)條的寬度）而在Mac系統(tǒng)下，滾動(dòng)條不占高度，這時(shí)候client的寬度還是200.
總結(jié)
clientLeft和clientTop
這兩個(gè)返回的是元素周?chē)吙虻暮穸?，如果不指定一個(gè)邊框或者不定位該元素，他的值就是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這一對(duì)屬性是用來(lái)讀取元素的body的寬度和高度的
與offset相關(guān)寬高介紹
與offset相關(guān)的寬高又有如下幾個(gè)屬性：
offsetWidth與offsetHeight
這一對(duì)屬性指的是元素的border+padding+content的寬度和高度。
該屬性和其內(nèi)部的內(nèi)容是否超出元素大小無(wú)關(guān)，只和本來(lái)設(shè)定的border以及width和height有關(guān)。
我們還是以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）總結(jié)
假如無(wú)padding無(wú)滾動(dòng)條無(wú)border：
offsetWidth=clientWidth=style.width
假如有padding無(wú)滾動(dòng)條有border：
offsetWidth=style.width+style.padding2+(border-width)2 offsetWidth=clientWidth+border寬度*2
假如有padding有滾動(dòng)條，且滾動(dòng)條是顯示的，有border：
offsetWidth=style.width+style.padding2+(border-width)2 offsetWidth=clientWidth+滾動(dòng)條寬度+border寬度*2
offsetLeft和offsetTop
這兩個(gè)屬性是基于offsetParent的，了解這兩個(gè)屬性我們必須先了解它，什么是offsetParent呢？
在IE6/7中：
offsetLeft=(offsetParent的padding-left)+(當(dāng)前元素的margin-left)
在IE8/9/10及Chrome中：
offsetLeft=(offsetParent的margin-left)+(offsetParent的border寬度)+(offsetParentd的padding-left)+(當(dāng)前元素的margin-left)
在FireFox中：
offsetLeft=(offsetParent的margin-left)+(當(dāng)前元素的margin-left)+(offsetParent的padding-left)
、、、、看到這里是不是已經(jīng)懵逼了？、、、還是舉例子吧：
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相關(guān)寬高介紹
與scroll相關(guān)的寬高屬性有如下幾個(gè)：
scrollWidth和scrollHeight
document.body的scrollWidth和scrollHeight與div的scrollWidth和scrollHeight是有區(qū)別的。
我們先來(lái)看看document.body的scrollWidth和scrollHeight：
給定寬高小于瀏覽器窗口
給定寬高大于瀏覽器窗口，且內(nèi)容小于給定寬高
給定寬高大于瀏覽器窗口，且內(nèi)容大于給定寬高
再來(lái)看看在某div中scrollWidth和scrollHeight：
在無(wú)滾動(dòng)軸的時(shí)候
.jpg)
scrollWidth==clientWidth=style.width+style.padding*2
在有滾動(dòng)軸的時(shí)候
.jpg)
scrollWidth==實(shí)際內(nèi)容的寬度+padding*2
scrollHeight==實(shí)際內(nèi)容的高度+padding*2
scrollLeft和scrollTop
這對(duì)屬性是可讀寫(xiě)（可被重新賦值） 的，指的是當(dāng)元素其中的內(nèi)容超出其寬高的時(shí)候，元素被卷起來(lái)的高和寬度。
obj.style.width和obj.style.height
對(duì)于一個(gè)dom元素，它的style屬性返回的是一個(gè)對(duì)象，這個(gè)對(duì)象中的任意一個(gè)屬性是可讀寫(xiě)的，style.width等于CSS屬性中的寬度style.height等于CSS屬性中的高度。
Event對(duì)象的5種坐標(biāo)
哪五種坐標(biāo)？
看完上述內(nèi)容，是不是對(duì)JavaScript中如何實(shí)現(xiàn)各種寬高屬性有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
