offsetWidth 和 offsetHeight
使用offsetWidth是獲取元素的尺寸的(content+padding+border)寬度
offsetWidth是獲取元素寬度最好的方法
如果元素以display：none的形式隱藏掉了蜈缤，那么這個(gè)元素的offsetWidth寬度是0
#box{
width: 100px;
height: 100px;
background-color: red;
padding: 20px;
border: 1px solid #000;
margin: 10px;
/*如果加了dispaly為none踩窖，則獲取的寬度為0*/
/*display: none;*/
}
var oBox = document.getElementById("box");
console.log(oBox.offsetWidth); //142
clientWidth和clientHeight
使用clientWidth是獲取元素可視化部分的寬度（content + padding的和） 不含邊框
#box{
width: 100px;
height: 100px;
background-color: red;
padding: 20px;
border: 1px solid #000;
margin: 10px;
/*如果加了dispaly為none翘县，則獲取的寬度為0*/
/*display: none;*/
}
var oBox = document.getElementById("box");
console.log(oBox.clientWidth); //140
scrollWidth和scrollHeight
scrollWidth是獲取元素的滾動(dòng)寬度（包含的內(nèi)容的完全的寬度 + 自身的padding）诺擅，外邊距只會(huì)算一邊市袖。
#box{
width: 100px;
height: 100px;
background-color: red;
padding: 20px;
border: 1px solid #000;
margin: 30px;
overflow: auto;
}
#con{
width: 1000px;
height: 80px;
padding: 20px;
border: 1px solid red;
margin: 10px;
}
<div id="box">
<div id="con"></div>
</div>
var oBox = document.getElementById("box");
console.log(oBox.scrollWidth);//1000+40+2+20 + 20自身padding= 1072
獲取窗口的大小
- 在js中 提供了兩個(gè)簡(jiǎn)便的操作
document.documentElement === html標(biāo)簽，document.body === body標(biāo)簽. - 獲取html標(biāo)簽的
clientWidth和clientHeight屬性烁涌，就可以獲取到瀏覽器窗口的寬高在怪異模式下凌盯，body是頂層的可視元素付枫，所以在怪異模式下獲取窗口的大小是document.body.clientWidth. - 兼容性寫(xiě)法：
document.documentElement.clientWidth || document.body.clientWidth
var oHtml = document.getElementsByTagName("html")[0];
var oBody = document.getElementsByTagName("body")[0];
console.log(document.documentElement === oHtml);//true
console.log(document.body === oBody);//true
// 打印瀏覽器窗口的寬高
console.log(document.documentElement.clientHeight);
console.log(document.documentElement.clientWidth);
//獲取窗口高度的兼容性寫(xiě)法
console.log(document.documentElement.clientWidth || document.body.clientWidth);
console.log(document.documentElement.clientHeight || document.body.clientHeight );
offsetLeft和offsetTop
返回當(dāng)前元素的偏移值
在標(biāo)準(zhǔn)模式下以最近的定位父級(jí)為參考的偏移位置(無(wú)論這個(gè)元素是否定位)
<div id="outer">
<div id="inner">
<div id="con"></div>
</div>
</div>
*{margin:0;padding:0;}
#outer{
width: 500px;
height: 500px;
margin: 50px;
overflow: hidden;
background-color: red;
padding: 10px;
border: 1px solid #000;
position: relative;
}
#inner{
width: 300px;
height: 300px;
background-color: yellow;
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
/*position: relative;*/
}
#con{
width: 100px;
height: 100px;
margin: 10px;
/*position: absolute;*/
/*left: 40px;*/
/*top: 40px;*/
background-color: #0ee69c;
}
var oCon = document.getElementById("con");
console.log(oCon.offsetLeft); //51
offsetParent
獲取一個(gè)元素最近的定位父級(jí) 返回的是定位父級(jí)這個(gè)元素
<div id="outer">
<div id="inner">
<div id="con"></div>
</div>
</div>
#outer{
width: 500px;
height: 500px;
margin: 50px;
overflow: hidden;
background-color: red;
padding: 10px;
border: 1px solid #000;
position: relative;
}
#inner{
width: 300px;
height: 300px;
background-color: yellow;
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
position: relative;
}
#con{
width: 100px;
height: 100px;
margin: 10px;
position: absolute;
left: 40px;
top: 40px;
background-color: #0ee69c;
}
/*
* offsetParent
* 獲取一個(gè)元素最近的定位父級(jí) 返回的是定位父級(jí)這個(gè)元素
*
*/
var oCon = document.getElementById("con");
console.log(oCon.offsetParent); //<div id="inner"><div id="con"></div></div>
clientLeft和clientTop
獲取左邊框和上邊框的大小
<div id="outer">
<div id="inner">
<div id="con"></div>
</div>
</div>
#outer{
width: 500px;
height: 500px;
margin: 50px;
overflow: hidden;
background-color: red;
padding: 10px;
border: 1px solid #000;
}
#inner{
width: 300px;
height: 300px;
background-color: yellow;
margin: 20px;
padding: 10px;
border: 10px solid #ccc;
}
#con{
width: 100px;
height: 100px;
margin: 10px;
border: 5px solid red;
background-color: #0ee69c;
}
/*
* 設(shè)計(jì)位置-clientLeft和clientTop
* 獲取左邊框和上邊框的大小
* parentNode是父節(jié)點(diǎn)
*
*/
var oCon = document.getElementById("con");
console.log(oCon.clientLeft); //5
console.log(oCon.parentNode.clientLeft); //10
console.log(oCon.parentNode.parentNode.clientLeft); //1
整體文檔大小的寬高
對(duì)于標(biāo)準(zhǔn)DOM模式來(lái)說(shuō) 就是獲取html的寬高
對(duì)于非標(biāo)準(zhǔn)模式，就是獲取body的寬高
兼容性代碼：document.documentElement.offsetHeight || document.body.offsetHeight;
<button id="btn">點(diǎn)一下</button>
<div id="outer"></div>
#outer{
width: 200px;
height: 2000px;
border: 1px solid #000;
overflow: auto;
}
#btn{
position: fixed;
left: 0;
top: 50%;
}
var oOuter = document.getElementById("outer");
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
console.log(document.documentElement.offsetWidth || document.body.offsetWidth); //整體文檔的寬看個(gè)人電腦
console.log(document.documentElement.offsetHeight || document.body.offsetHeight); //2002
}
scrollLeft和scrollTop
可以讀寫(xiě)向左或向上 移出可視區(qū)域外的寬度或高度
其實(shí)就是滾動(dòng)條已經(jīng)滾過(guò)的距離
<button id="btn">點(diǎn)一下</button>
<div id="outer">
<div id="con"></div>
</div>
#outer{
width: 200px;
height: 200px;
border: 1px solid #000;
overflow: auto;
}
#con{
width: 2000px;
height: 2000px;
background-color: pink;
}
/*
* scrollLeft和scrollTop:
* - 可以讀寫(xiě)向左或向上 移出可視區(qū)域外的寬度或高度
* - 其實(shí)就是滾動(dòng)條已經(jīng)滾過(guò)的距離
*
*/
var oOuter = document.getElementById("outer");
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
// oOuter.scrollLeft = 200; //可寫(xiě)操作
console.log(oOuter.scrollLeft);
console.log(oOuter.scrollTop);
}
