1、查看滾動條的距離：
ie9以上及其它瀏覽器
window.pageXOffset / pageYOffset
ie8以及ie8以下
document.body.scrollLeft / top
document.documentElement.scrollLeftutedStyle 讀取樣式，通過 element.style 修改樣式
function getScrollOffset() {
if (window.pageXOffset) {
return {
x: window.pageXOffset,
y: window.pageYOffset,
}
} else {
return {
x: document.body.scrollLeft + document.documentElement.scrollLeft,
y: document.body.scrollTop + document.documentElement.scrollTop
}
}
} window.innerWidth /window.innerHeight
ie8和ie8以下
ie標準模式 如聲明<!DOCTYPE html> 表示以h5文檔
ie怪異模式（混雜模式）,html文檔不帶 <!DOCTYPE html> 使當前代碼支持以前的瀏覽器版本
//標準模式
document.documentElement.clientWidth;
document.documentElement.clientHeight;
//怪異模式
document.body.clientHeight;
document.body.clientWidth;
//如何判定現在是標準模式還是怪異模式：
//方法一：執行以下代碼
alert(window.top.document.compatMode) ;
//BackCompat 表示怪異模式,
//CSS1Compat 表示標準模式
//方法二：jquery爲我們提供的方法，如下：
alert($.boxModel)
alert($.support.boxModel)封裝的方法：
function getViewportOffst() {
if (window.innerWidth) {
return {
w: window.innerWidth,
h: window.innerHeight
}
} else {
if (document.compatMode === "Backcompat") {
return {
w: document.body.clientWidth,
h: document.body.clientHeight
}
} else {
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
}
}
}
}3、瀏覽器可視區窗口尺寸：
3.1獲得頁面中某個元素的左,上,右和下分別相對瀏覽器視窗的位置
getBoundingClientRect();
var box=document.getElementById('box'); // 獲取元素
alert(box.getBoundingClientRect().top); // 元素上邊距離頁面上邊的距離
alert(box.getBoundingClientRect().right); // 元素右邊距離頁面左邊的距離
alert(box.getBoundingClientRect().bottom); // 元素下邊距離頁面上邊的距離
alert(box.getBoundingClientRect().left); // 元素左邊距離頁面左邊的距離dom.offsetParent //返回最近有定位的父級元級
offsetWidth /offsetHeight 包含 padding的寬高，不含margin
offsetLeft /offsetTop //對於無定位父級的元素，返回相對文檔的座標，對有定位父級的元素，返回相對應於最近有定位的父級的座標。
4、滾動條滾動：
window三個方法：
scroll();scrollTo();scrollBy();
用法都是講x,y座標傳入，即實現讓滾動條滾動到當前位置
區別：scrollBy()會在之前的基礎上累加
5、使用 Dom 的 getComputedStyle 方法獲取元素的樣式：
5.1用法：
document.defaultView.getComputedStyle(element[,pseudo-element]);
window.getComputedStyle(element[,pseudo-element]);
首先是有兩個參數，元素和僞類。第二個參數不是必須的，當不查詢僞類元素的時候可以忽略或者傳入 null。
使用示例：
let my_div = document.getElementById("myDiv");
let style = window.getComputedStyle(my_div, null);
關於 defaultView 引用一下 MDN 對於defaultView 的描述
在許多在線的演示代碼中, getComputedStyle 是通過 document.defaultView 對象來調用的。 大部分情況下，這是不需要的， 因爲可以直接通過window對象調用。但有一種情況，你必需要使用 defaultView, 那是在 Firefox 3.6 上訪問子框架內的樣式 (iframe).而且除了在 IE8 瀏覽器中 document.defaultView === window 返回的是 false 外，其他的瀏覽器（包括 IE9 ）返回的都是 true。所以後面直接使用 window 就好，不用在輸入那麼長的代碼了。
5.2返回值：
getComputedStyle 返回的對象是 CSSStyleDeclaration 類型的對象。取數據的時候可以直接按照屬性的取法去取數據，例如 style.backgroundColor。需要注意的是，返回的對象的鍵名是 css 的駝峯式寫法，background-color -> backgroundColor。
需要注意的是 float 屬性，根據 《JavaScript 高級程序》所描述的情況 ，float 是 JS 的保留關鍵字。根據 DOM2 級的規範，取元素的 float 的時候應該使用 cssFloat。其實 chrome 和 Firefox 是支持 float 屬性的，也就是說可以直接使用
var float_property = window.getComputedStyle.style; // chrome 和 Firefox支持而在任何版本的 IE 中都不能這樣使用，並且在 IE 8 中僅支持 styleFloat ，這個下面的兼容性問題中談到。
getComputedStyle 和 element.style 的相同點就是二者返回的都是 CSSStyleDeclaration 對象，取相應屬性值得時候都是採用的 CSS 駝峯式寫法，均需要注意 float 屬性。
而不同點就是：
element.style 讀取的只是元素的“內聯樣式”，即 寫在元素的 style 屬性上的樣式；而 getComputedStyle 讀取的樣式是最終樣式，包括了“內聯樣式”、“嵌入樣式”和“外部樣式”。
element.style 既支持讀也支持寫，我們通過 element.style 即可改寫元素的樣式。而 getComputedStyle 僅支持讀並不支持寫入。
我們可以通過使用 getComputedStyle 讀取樣式，通過 element.style 修改樣式