1. offSet 家族
1. offsetWidth 和 offsetHeight
1.1 offsetWidth
- 獲取對象自身的寬度 ，包括內容、邊框和內邊距,
（不包括外邊距）
- 即：
offsetWidth = width + border + padding
div{
width: 300px; border-right:2px solid #ccc; padding:10px;
}
問：div的offsetWidth是多少？
答：300+2+10*2=322
1.2 offsetHeight
- 獲取對象自身的高度 ，包括內容、邊框和內邊距,
（不包括外邊距）
- 即：
offsetHeight = height + border + padding
2. offsetLeft 和 offsetTop
2.1 offsetLeft
- 距離第一個
有定位的父級盒子左邊的距離
- 注意：父級盒子必須要有定位，如果沒有，則最終以
body爲準
2.2 offsetTop
- 距離第一個
有定位的父級盒子上邊的距離
- 注意：父級盒子必須要有定位，如果沒有，則最終以
body爲準
![在這裏插入圖片描述]()
- 總結：
offsetLeft和offsetTop從父標籤的padding開始計算，不包括border- 即：從子盒子邊框到定位父盒子邊框的距離
3. offsetParent
- 返回當前對象的父級（帶有定位）盒子，可能是父親、也可能是爺爺
3.1 元素本身已經定位
- 如果元素本身已經定位，那麼
offsetParent 屬性返回此元素已定位父級元素，如沒有已定位的父級元素，則返回 body 對象
<body>
<div>
<span id="obj1" style="position:absolute"></span>
</div>
<div id="pObj1" style="position:absolute">
<span id="obj2" style="position:absolute"></span>
</div>
</body>
結果：
1. obj1.offsetParent 返回 body 對象
2. obj2.offsetParent 返回 pObj1 對象
3.2 元素沒有定位
- 如果元素沒有定位，
offsetParent 不但會找已經定位的父級元素而且還會查找類型爲 td 和 table 的父級元素，只要找到這三種父級元素的其中任何一種元素將返回此元素，否則返回 body 對象
<table width="500" border="0">
<tr>
<td id="td1">
<div id="pObj1">
<span id="obj1"></span>
</div>
</td>
</tr>
<tr>
<td>
<div id="pObj2" style="position:relative">
<span id="obj2"></span>
</div>
</td>
</tr>
</table>
結果：
1. obj1.offsetParent 返回 td1 對象
2. obj2.offsetParent 返回 pObj2 對象
3.3 offsetParent 和 parentNode 區別
parentNode
parentNode 指與位置無關的上級元素parentNode最多能獲取到document文檔對象
offsetParent
offsetParent 指與位置有關的上級元素offsetParent 最多獲取到body元素，在往上獲取就是null
4. offsetXXX 和 style.XXX 區別
4.1 offsetWidth 與 style.width 區別
- 樣式位置
- 行內樣式，如
<div id="box" style="width:100px">時，用 style.width或者offsetWidth都可以獲取元素的寬度
- 樣式表，如
＃box{ width: 100px; }, 此時只能用offsetWidth來獲取元素的寬度，而style.width所返回值爲空
- 數值
style.width 獲取的元素寬度只是div的寬度，不包括border、和padding所佔的寬度，且寬度值是帶單位px的offsetWidth 獲取的元素寬度爲width+border+padding的值（不包括margin），且返回值只爲一個數值，不帶單位
<body>
<div id="box"
style="width:300px; height: 300px; padding:3px; margin: 1px; border: 1px solid red;">
</div>
<script>
window.onload = function(){
var box = document.getElementById('box');
console.log(box.style.width);
console.log(box.offsetWidth);
}
</script>
</body>
結果：300px
308
- 設置寬度
style.width 可以在js中用來設置元素的寬度offsetWidth不可以設置元素的寬度
4.2 offsetLeft 和 style.left 區別
style.left只能獲取行內的，而offsetLeft則可以獲取到所有；offsetLeft 可以返回沒有定位盒子距離左側的位置；而style.left不可以，其只能返回有定位盒子的left;offsetLeft 返回的是數字，而 style.left 返回的是字符串，除了數字外還帶有單位：px;
- 注意：可以用
parseInt進行轉化；
- 比如：
styleLeft='300px' —> parseInt(styleLft) —> 300
offsetLeft是只讀的，而style.left是可讀寫；- 如果沒有給 當前 元素指定過
top 樣式，則 style.top 返回的是空字符串
2. scroll 家族
1. 基本概念
- 網頁正文全文寬：
document.body.scrollWidth
- 網頁正文全文高：
document.body.scrollHeight
- 網頁被捲去的高：
document.body.scrollTop
- 網頁被捲去的左：
document.body.scrollLeft
![在這裏插入圖片描述]()
2. 處理scroll家族瀏覽器適配問題
window.pageXOffset; （scrollLeft）
window.pageYOffset; （scrollTop）
document.documentElement.scrollTop;
Chrome瀏覽器 和 沒有聲明 DTD <DOCTYPE >
document.body.scrollTop;
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
3. scroll(x,y)
- 把內容滾動到指定的座標
- 格式：
scrollTo(xpos,ypos)
xpos 必需；要在窗口文檔顯示區左上角顯示的文檔的 x 座標；ypos 必需；要在窗口文檔顯示區左上角顯示的文檔的 y 座標 。
- 網頁大部分都沒有水平滾動條，所以，這個 x 不太常用
3. client 家族
1. clientWidth 和 clientHeight
- 網頁可見區域寬：
document.body.clientWidth;
- 網頁可見區域高：
document.body.clientHeight;
2. clientLeft 和 clientTop
clientLeft，clientTop
- 返回的是元素邊框的
borderWidth
- 如果不指定一個邊框或者不定位改元素，其值就爲
0
4. pageX/pageY、screenX/screenY、clientX/clientY 區別
screenX/screenY 是以屏幕爲基準進行測量
pageX 和 pageY 是以當前文檔（絕對定位）爲基準，不適用於IE6-8;clientX 和 clientY 是以當前可視區域爲基準，類似於固定定位
5. offset、client 和 scroll 區別
1. left 和 top 分析：
clientLeft: 左邊邊框的寬度clientTop: 上邊邊框的寬度offsetLeft: 當前元素距離有定位的父盒子左邊的距離offsetTop: 當前元素距離有定位的父盒子上邊的距離scrollLeft: 左邊滾動的長度scrollTop: 上邊滾動的長度
2. width 和 height 分析
clientWidth/Height: 內容 + 內邊距offsetWidth/Height: 內容 + 內邊距 + 邊框scrollWidth/Height: 滾動內容的寬度和高度
![在這裏插入圖片描述]()
6. 獲取屏幕的可視區域
window.innerWidth, window.innerHeight
document.documentElement.clientWidth, document.documentElement.clientHeight
document.body.clientWidth, document.body.clientHeight
function client() {
if(window.innerWidth){
return{
width: window.innerWidth,
height: window.innerHeight
}
}else if(document.compatMode != 'CSS1Compat'){
return{
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
return{
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
