寬高和位置
在JS中我們需要學習DOM元素和頁面的寬高及位置。本期小編就元素及頁面寬高和位置做出詳細解說。
一： 元素寬高
1）三種元素寬高
元素.clientWidth 客戶寬高
元素.clientHeight
元素.offsetWidth 偏移寬高
元素.offsetHeight
元素.scrollWidth 滾動寬高
元素.scrollHeight
以上所有的寬高，基於元素被加入到DOM渲染樹後，也就是被添加在頁面中以後，纔可以獲取
如下面代碼；
console.log(div.clientWidth);//無法獲取
document.body.appendChild(div);
console.log(div.clientWidth);//獲取到了
並且圖片這類後加載元素無法獲取寬高 （異步原因造成）
異步 當運行某個需要一段時間完成的內容時，可以先繼續向後執行代碼，加載和執行後面是同時進行的
同步 上一步執行完成再執行下一步
2）三者區別
getComputedStyle(div).width;//獲取元素寬高爲50px padding值20px
(div.clientWidth,div.clientHeight;
2.1) 沒有滾動條的時候 70px width+padding ‘
2.1)有滾動條 width+padding-17（滾動條寬高）
div.offsetWidth,div.offsetHeight;
2,2) 74px width+padding+border 實際這個div的佔位寬高
div.scrollWidth,div.scrollHeight;
2.3)沒有滾動條 70px width+padding
2.3) 有滾動條 因爲內容寬度不同，實際內容寬度+padding
二： 頁面寬高
document.body (body)
document.documentElement (html)
1,1）body的clientHeight和clientWidth
頁面寬度-16（默認8個像素的寬度） 高度0（因爲沒有內容）如果有內容會撐開
元素有多高，就會撐開多少 ，寬度是可視寬度
document.body.clientWidth,document.body.clientHeight;
2.1）html的clientHeight和clientWidth
獲取頁面的可視寬高 ，並不會因爲內容變大而撐開
document.documentElement.clientWidth,document.documentElement.clientHeight;
1.2) body的offsetWidth和clientWidth相同
document.body.offsetWidth,document.body.offsetHeight;
2.2) html的offsetwidth和offsetHight
無內容是獲取頁面的可視寬度，高度是8
有內容，寬度仍然是可視寬度，html的高度是body內容高度+bodyMargin
document.documentElement.offsetWidth,document.documentElement.offsetHeight;
1.3) body的scrollwidth和scrollHight;
沒有內容時和body的clientWidth相同
有內容，內容撐開的寬高，和clientHeight相同，內容寬度
document.body.scrollWidth,document.body.scrollHeight;
2.3) HTML的scrollWH
如果沒有body沒有高度，則是可視寬高
如果body有寬高，不超過可視寬高，則是可視寬高
如果body的寬高超出可視範圍，則是body寬高+margin(寬度+margin，高度+margin*2)
document.documentElement.scrollWidth,document.documentElement.scrollHeight;
3、總結；
1、內容高度 console.log(document.body.clientHeight);
2、可視寬高 document.documentElement.clientWidth,document.documentElement.clientHeight
3、有滾動條時，內容寬高 document.body.scrollWidth,document.body.scrollHeight；
二 、 位置
clientLeft clientTop
offsetLeft offsetTop
scrollLeft scrollTop
二.1、 元素位置
1、 邊線寬高（border值）
div1.clientLeft,div1.clientTop;
2、 沒有定位時，相對頁面的左上頂角位置
如果定位 相對父容器左上角位置 和css中left，top相同
div1.offsetLeft,div1.offsetTop;
3、 是元素上的滾動條位置 僅這兩個屬性可以設置
div1.scrollLeft,div1.scrollTop;
如；div1.scrollTop=157;
(div1.scrollHeight-div1.clientHeight這個就是最大滾動位置,到底
4、 操作滾動條觸發執行函數
div1.οnscrοll=function(){
console.log(div1.scrollTop);//獲取滾動條位置
5、IE8以後纔有的方法
獲取元素的矩形界限範圍
var rect=div1.getBoundingClientRect();
{
width, //offsetWidth
height, //offsetHeight
left, //最左邊到可視窗口的距離
top, //最頂部到可視窗口的距離
right,//left+width 最右邊到可視窗口的距離
bottom,//top+height 最下面到可視窗口的距離
x, //left
y //top
}
6、總結；
6.1、offsetLeft、offsetTop，定位後元素相對父容器的距離
6.2、scrollLeft，scrollTop,元素內的滾動條位置
6.3、 getBoundingClientRect()獲取元素的矩形界限範圍
二.2 、 html body
1、 body 和 html沒有邊線，所有這兩個值都是0
(document.body.clientLeft,document.body.clientTop
document.documentElement.clientLeft,document.documentElement.clientTop
2、 因爲body和html標籤都是最頂端，最外層，這兩個值都是0
document.body.offsetLeft,document.body.offsetTop
document.documentElement.offsetLeft,document.documentElement.offsetTop
3、 window.οnscrοll=function(){
document.body.scrollTop,早起谷歌瀏覽器和蘋果瀏覽器是body
而現在window的滾動條是document.documentElement的scrollTop
document.documentElement.scrollTop,
}
並且 document.documentElement.scrollTop=200;
4、總結；
window窗口的滾動條位置獲取和設置 document.documentElement.scrollLeft和document.documentElement.scrollTop