style的屬性，length的目的，就是將其與item()方法配套使用，以便迭代在元素中定義的CSS屬性。如：

    
this is a paragraph.
    

style的屬性，可以使用屬性名進一步取得屬性的值。如：

    
this is a paragraph.
    

style屬性，返回一個包含兩個屬性的CSSValue對象，這兩個屬性分別是cssText和cssValueType。其中，cssText屬性的值與getPropertyValue()返回的值相同，而cssValueType屬性則是一個數值常量，表示值的類型：0為繼承的值；1為基本的值；2為列表；3為自定義的值。如下面的代碼即輸出CSS屬性值，也輸出值的類型：

var p = document.getElementById("p");
var i, prop;
for (i = 0, len = p.style.length; i < len; i++) {
    prop = p.style[i];
    value = p.style.getPropertyCSSValue(prop);
    console.log(prop + ":" + value.cssText + "," + value.cssValueType);
    // [Log] color:red,1 (testingjs.js, line 6)
    // [Log] font-family:monospace,2 (testingjs.js, line 6)
}

或許兼容性有問題，這個代碼在chrome中運行不了。不過，此方法不常用，一般都是用getPropertyValue()方法

該屬性的目的是要移除某個CSS屬性。如：

var p = document.getElementById("p");
p.style.removeProperty("color");

該屬性的目的是要添加某個CSS屬性。如：

var p = document.getElementById("p");
console.log(p.style.setProperty("color","orange"));

前者是增強了document.defaultView，這個方法接收兩個參數：計算樣式的元素以及一個偽元素字符串（如:after）。如果不需要偽元素信息，第二個值設置為null即可。該方法返回一個CSSStyleDeclaration對象，以下面代碼為例：

使用getComputedStyle()方法，用法是document.defaultView.getComputedStyle()返回CSSStyleDeclaration實例：

var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
console.log(computedStyle.length); //263
console.log(myDiv.style.length); //18
console.log(computedStyle.backgroundColor); //rgb(255,0,0)
console.log(computedStyle.border); //1px solid rgb(0, 0, 0)
console.log(computedStyle.width + computedStyle.height); //100px200px

currentStyle屬性則是用在IE上的，與上述類似。用法是element.currentStyle返回CSSStyleDeclaration實例。

CSSStyleSheet類型表示的是樣式表，包括link元素包含的樣式表和在style元素中定義的樣式表。這兩個元素本身是由HTMLLinkElement和HTMLStyleElement類型表示的。但是CSSStyleSheet類型相對更加通用一些，它只表示樣式表，而不管這些樣式表在HTML中是如何定義的。CSSStyleSheet繼承自StyleSheet，接口屬性如下：

disabled：表示樣式表是否被禁用的布爾值；

href：如果是link元素表示的樣式表，則是樣式表的URL，否則是null；

media：當前樣式表支持的所有媒體類型的集合，可用length屬性和item()方法，在IE中返回字符串；

ownerNode：指向擁有當前樣式表的節點的指針；IE不支持；

parentStyleSheet：如果樣式表是通過@import導入的，這個屬性是一個指向導入它的樣式表的指針；

title：ownerNode中title值；

type：樣式表類型的字符串，一般是“type/css”；

CSSStyleSheet類型還支持下面的屬性和方法：

cssRules：樣式表中包含的樣式規則的集合。IE不支持但有個類似的rules；

ownerRule：樣式表是通過@import導入的，這個屬性就是一個指針，指向表示導入的規則；否則為null；IE不支持；

deleteRule(index)：刪除cssRules集合中指定位置的規則；IE不支持但有個類似的removeRule()方法；

insertRule(rule,index)：向cssRules集合中指定的位置插入rule字符串，IE不支持但有個類似的addRule()方法；

應用于文檔中的所有樣式表是通過document.styleSheets集合來表示的。

另外，也可以直接通過link元素和style元素取得CSSStyleSheet對象。DOM規定了一個包含CSSStyleSheet對象的屬性，名叫sheet；在IE，可以使用styleSheet屬性。如：

console.log(document.getElementsByTagName("style")[0].sheet); //CSSStyleSheet對象
console.log(document.getElementsByTagName("style")[0].styleSheet); //CSSStyleSheet對象 只用于IE
console.log(document.styleSheets[0]); //同樣也是CSSStyleSheet對象

層次梳理：

console.log(document.styleSheets); //StyleSheetList對象 該行代碼包含著所有包括link元素和style元素的樣式表
console.log(document.styleSheets[0].cssRules); //CSSRuleList對象 該行代碼包含著第一個樣式表中的所有規則
console.log(document.styleSheets[0].cssRules[0]); //CSSStyleRule對象 該行代碼表示第一個樣式表中的第一條規則 可通過cssText屬性訪問

CSSRule對象表示樣式表中的每一條規則：

cssText：返回整條規則對應的文本；IE不支持；

parrentRule：如果是導入的規則，這個屬性引入的就是導入規則否則為null；

parentStyleSheet：當前規則所屬的樣式表，IE不支持；

selectorText：返回當前規則的選擇符文本；

style：可以通過它設置和取得規則中特性的樣式值；是一個CSSStyleDeclaration對象；

type：規則類型的常量值，對于樣式規則，這個值是1；IE不支持；

比較常用的屬性是：cssText、selectorText、style。另外，cssText是只讀的，但是style.cssText則是讀寫的。

以下面的代碼為例：

script代碼如下：

var sheet = document.getElementsByTagName("style")[0].sheet; //獲得第一個stylesheet
var rule = sheet.rules[0]; //獲得該樣式表中第一條規則

console.log(rule.cssText); //#myDiv { width: 100px; height: 200px; background-color: blue; }（獲得該規則對應的文本）
console.log(rule.selectorText); //#myDiv（該規則的選擇符文本）

console.log(rule.style); //CSSStyleDeclaration
console.log(rule.style[0]); //background-color（取得該規則中特定的樣式值）
console.log(rule.style[1]); //width

另外，可以用style的方式修改樣式信息：

var sheet = document.getElementsByTagName("style")[0].sheet;
var targetRule = sheet.rules[0];
targetRule.style.height = "300px";

insertRule()方法，向現有樣式表中添加新規則；接收兩個參數：規則文本和插入規則的索引。IE8及更早的的瀏覽器支持類似的方法：addRule()，接收兩個必選參數：選擇符文本、CSS樣式信息和一個可選參數：插入規則的位置；

deleteRule()方法，接收一個參數：要刪除的規則的位置，IE中用removeRule()方法

DOM中沒有規定如何確定頁面中元素的大小，IE為此率先引入了一些屬性。

offsetHeight：垂直方向上占用的空間大小；

offsetWidth：水平方向上占用的空間大小；

offsetLeft：左外邊框至包含元素的左內邊框之間的像素距離；

offsetTop：上外邊框至包含元素的上內邊框之間的像素距離；

如下面的div元素:

script:

var div = document.getElementById("myDiv");
console.log(div.offsetHeight); //122 包括了100px的高度、2個1px的border、2個10px的padding，共122px
console.log(div.offsetWidth); //112 包括了80px的高度、2個1px的border、1個10px的padding和1個20px的padding-left，共112px
console.log(div.offsetLeft); //10 包括了10px的margin
console.log(div.offsetTop); //20 包括了20px的margin-top

對塊級元素來說，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相對于 offsetParent 的邊界框。

    

        

    
    

        

            
th1
            
th2
        
        

            
td1
            
td2
        
    
    

對于使用表格和內嵌框架布局的頁面，不同瀏覽器實現這些元素的方式不同，得到的值不會太準確。

指的是內容及內邊距所占據的空間大小：clientWidth、clientHeight；如：

console.log(div.clientHeight); //120 height加上padding，不包括margin和border
console.log(div.clientWidth); //110 width加上padding，不包括margin和border

又如使用該屬性取得瀏覽器視口大小：

var div = document.getElementById("myDiv");
function getViewport() {
    if (document.compatMode == "BackCompat") {
        return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        };

    } else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        };
    }
}
console.log(getViewport()); //{width: 1280 height: 913}

指的是包含滾動內容的元素的大小：

scrollHeight：在沒有滾動條的情況下，元素內容的總高度；

scrollWidth：在沒有滾動條的情況下，元素內容的總寬度；

scrollLeft：被隱藏在內容區域左側的像素數；

scrollTop：被隱藏在內容區域上方的像素數；

如：

#pId{
        width: 100px;
        height: 100px;
        border: 1px solid gray;
        overflow: scroll;
    }

thisisamessage.thisisamessage.thisisamessage.
    thisisamessage.thisisamessage.
    thisisamessage.
    thisisamessage.
    thisisamessage.
    thisisamessage.thisisamessage.
    thisisamessage.thisisamessage.thisisamessage.thisisamessage.thisisamessage.thisisamessage.thisisamessage.


var x = document.getElementById("pId");
var t = setTimeout(echoo, 1000);
function echoo() {
    console.log(x.scrollLeft);
    var y = setTimeout(echoo, 1000);
}

另外，帶有垂直滾動條的頁面總高度就是document.documentElement.scrollHeight。

在不包含滾動條的頁面而言，scrollWidth和scrollHeight與clientWidth和clientHeight之間的關系并不是分清晰。一些瀏覽器會出現不一致問題，如：

Firefox 中這兩組屬性是相等的，大小代表的是文檔內容區域的實際尺寸，非視口尺寸；

Opera、Safari >= 3.1、Chrome中這兩組屬性是有差別的，s...是視口大小，c...是文檔內容區域的大小；

IE在標準模式下，s...是內容區域大小，c...是視口大小；

要確定文檔的總高度時，必須取得s...或c...之間的最大值（Math.max），如：

var docHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);
console.log(docHeight); //913
var docWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.scrollWidth);
console.log(docWidth); //1280

下面的函數會檢測元素是否位于頂部，如果不是就會將其自動滾到頂部：

#pId{
        width: 150px;
        height: 200px;
        border: 1px solid gray;
        overflow: scroll;
    }

HTMLElement.offsetParent 是一個只讀屬性，返回一個指向最近的（closest，指包含層級上的最近）包含該元素的定位元素。如果沒有定位的元素，則 offsetParent 為最近的 table 元素對象或根元素（標準模式下為 html；quirks 模式下為 body）。當元素的 style.display 設置為 "none" 時，offsetParent 返回 null。offsetParent 很有用，因為 offsetTop 和 offsetLeft 都是相對于其內邊距邊界的。


var pElem = document.getElementById("pId");
var btn = document.getElementById("stt");

btn.onclick = scrollToTop;

function scrollToTop() {
    if (pElem.scrollTop !== 0) {
        pElem.scrollTop = 0;
    }
}

getBoundingClientRect()方法會返回一個矩形對象，包含4個屬性：left、top、right和bottom：

var p = document.getElementById("divId");
console.log(p.getBoundingClientRect().right); //110
console.log(p.getBoundingClientRect().left); //10
console.log(p.getBoundingClientRect().top); //10
console.log(p.getBoundingClientRect().bottom); //60

注意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默認坐標從(2,2)開始計算，導致最終距離比其他瀏覽器多出兩個像素，我們需要做個兼容。

document.documentElement.clientTop; // 非IE為0，IE為2
document.documentElement.clientLeft; // 非IE為0，IE為2
functiongGetRect(element) {
    var rect = element.getBoundingClientRect();
    var top = document.documentElement.clientTop;
    var left = document.documentElement.clientLeft;
    return {
        top: rect.top - top,
        bottom: rect.bottom - top,
        left: rect.left - left,
        right: rect.right - left
    }

}