如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
獲取窗口屬性
-
查看滾動條的滾動距離
-
window.pageXOffset/pageYOffset
-
document.body/documentElement.scrollLeft/scrollTop
-
兼容性比較混亂，同時取兩個值相加，因為不可能存在兩個同時有值
-
封裝兼容性方法，求滾動輪滾動離getScrollOffset()
為了解決兼容性的問題，我們來封裝一個函數：
<script type="text/javascript">
function getScrollOffset() {
if(window.pageXOffset) { x : window.pageXoffset, y : window.pageYoffset }
else{
return { x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop,
}
}
}
</script>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
查看視口的尺寸
-
window.innerWidth/innerHeight
-
document.documentElement.clientWidth/clientHeight
-
document.body.clientWidth/clientHeight
-
封裝兼容性方法，返回瀏覽器視口尺寸getViewportOffset()
為了解決兼容性的問題，我們來封裝一個函數:
<script type="text/javascript"> function getSViewportOffset() { if(window.innerWidth) { return {
w : window.innerWidth,
h : window.innerHeight
}
}else{ if(document.compatMode ==="BackCompat") { return {
w : document.body.clienWidth,
h : document.body.clientHeight
}
}else{ return {
w : document.documentElement.clientWidth,
h : document.documrntElement.clientHeight
}
}
}
</script>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
查看元素的幾何尺寸
-
domEle.getBoundingClientRect();
-
兼容性很好
-
該方法返回一個對象，對象里面有left，top，right，bottom等屬性。left和top代表該元素左上角的X和Y坐標，right和bottom代表元素右下角的X和Y坐標。
-
height和width屬性老版本IE不顯示（人為解決：分別相減一下就能得出）
-
返回的結果并不是”實時的”
-
讓滾動條滾動
-
window上有三個方法
-
scroll(x,y)在x軸、y軸上滾動的位置,scrollTo(x,y)
讓滾動條滾動到當前位置，而不是累加距離（這兩種方法是完全一樣的）
-
scrollBy();累加滾動距離
-
三個方法功能類似，用法都是將x,y坐標傳入。即實現讓滾動條滾動到當前位置。
-
區別：scrollBy()會在之前的數據基礎之上做累加。
-
eg：利用scroll()頁面定位功能。
-
eg：利用scrollBy()快速閱讀功能。
練習：
做一個小閱讀器，會自動翻頁。
<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> 文本內容 <div style="width:100px;height:100px;background-color:orange;color:#fff;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:200px;right:50px;opcity:0.5;">start</div> <div style="width:100px;height:100px;background-color:orange;color:green;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:50px;right:50px;opcity:0.5;">stop</div> </body> <script type="text/javascript"> var start = document.getElement.getElementsByTagName('div')[0]; var stop = document.getElement.getElementsByTagName('div')[1]; var timer = 0; var key = true; start.onclick = function() { if(key) {
timer = setInterval(function() { window.scollBy(0,10);
},100);
key = false;
}
}
stop.onclick = function() { clearInterval(timer);
key = true;
} </script>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
查看元素的尺寸（視覺上的）
-
dom.offsetWidth,dom.offsetHeight
-
查看元素的位置
-
dom.offsetLeft,dom.offsetTop
-
對于無定位父級的元素，返回相對文檔的坐標。對于有定位的父級元素，返回相對于最近的有定位的父級的坐標。
-
dom.offsetParent
-
返回最近的有定位的父級，如無，返回body,body.offsetParent返回null
-
eg：求元素相對于文檔的坐標getElementPosition
-
藍藍設計( m.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
