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

    
this is a paragraph.
    

style的屬性，可以使用屬性名進(jìn)一步取得屬性的值。如：

    
this is a paragraph.
    

style屬性，返回一個(gè)包含兩個(gè)屬性的CSSValue對(duì)象，這兩個(gè)屬性分別是cssText和cssValueType。其中，cssText屬性的值與getPropertyValue()返回的值相同，而cssValueType屬性則是一個(gè)數(shù)值常量，表示值的類型：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)
}

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

該屬性的目的是要移除某個(gè)CSS屬性。如：

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

該屬性的目的是要添加某個(gè)CSS屬性。如：

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

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

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

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實(shí)例。

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

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

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

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

ownerNode：指向擁有當(dāng)前樣式表的節(jié)點(diǎn)的指針；IE不支持；

parentStyleSheet：如果樣式表是通過(guò)@import導(dǎo)入的，這個(gè)屬性是一個(gè)指向?qū)胨臉邮奖淼闹羔槪?/p>

title：ownerNode中title值；

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

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

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

ownerRule：樣式表是通過(guò)@import導(dǎo)入的，這個(gè)屬性就是一個(gè)指針，指向表示導(dǎo)入的規(guī)則；否則為null；IE不支持；

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

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

應(yīng)用于文檔中的所有樣式表是通過(guò)document.styleSheets集合來(lái)表示的。

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

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

層次梳理：

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

CSSRule對(duì)象表示樣式表中的每一條規(guī)則：

cssText：返回整條規(guī)則對(duì)應(yīng)的文本；IE不支持；

parrentRule：如果是導(dǎo)入的規(guī)則，這個(gè)屬性引入的就是導(dǎo)入規(guī)則否則為null；

parentStyleSheet：當(dāng)前規(guī)則所屬的樣式表，IE不支持；

selectorText：返回當(dāng)前規(guī)則的選擇符文本；

style：可以通過(guò)它設(shè)置和取得規(guī)則中特性的樣式值；是一個(gè)CSSStyleDeclaration對(duì)象；

type：規(guī)則類型的常量值，對(duì)于樣式規(guī)則，這個(gè)值是1；IE不支持；

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

以下面的代碼為例：

script代碼如下：

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

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

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

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

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

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

deleteRule()方法，接收一個(gè)參數(shù)：要?jiǎng)h除的規(guī)則的位置，IE中用removeRule()方法

DOM中沒(méi)有規(guī)定如何確定頁(yè)面中元素的大小，IE為此率先引入了一些屬性。

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

offsetWidth：水平方向上占用的空間大?。?/p>

offsetLeft：左外邊框至包含元素的左內(nèi)邊框之間的像素距離；

offsetTop：上外邊框至包含元素的上內(nèi)邊框之間的像素距離；

如下面的div元素:

script:

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

對(duì)塊級(jí)元素來(lái)說(shuō)，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相對(duì)于 offsetParent 的邊界框。

    

        

    
    

        

            
th1
            
th2
        
        

            
td1
            
td2
        
    
    

對(duì)于使用表格和內(nèi)嵌框架布局的頁(yè)面，不同瀏覽器實(shí)現(xiàn)這些元素的方式不同，得到的值不會(huì)太準(zhǔn)確。

指的是內(nèi)容及內(nèi)邊距所占據(jù)的空間大小：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}

指的是包含滾動(dòng)內(nèi)容的元素的大?。?/p>

scrollHeight：在沒(méi)有滾動(dòng)條的情況下，元素內(nèi)容的總高度；

scrollWidth：在沒(méi)有滾動(dòng)條的情況下，元素內(nèi)容的總寬度；

scrollLeft：被隱藏在內(nèi)容區(qū)域左側(cè)的像素?cái)?shù)；

scrollTop：被隱藏在內(nèi)容區(qū)域上方的像素?cái)?shù)；

如：

#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);
}

另外，帶有垂直滾動(dòng)條的頁(yè)面總高度就是document.documentElement.scrollHeight。

在不包含滾動(dòng)條的頁(yè)面而言，scrollWidth和scrollHeight與clientWidth和clientHeight之間的關(guān)系并不是分清晰。一些瀏覽器會(huì)出現(xiàn)不一致問(wèn)題，如：

Firefox 中這兩組屬性是相等的，大小代表的是文檔內(nèi)容區(qū)域的實(shí)際尺寸，非視口尺寸；

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

IE在標(biāo)準(zhǔn)模式下，s...是內(nèi)容區(qū)域大小，c...是視口大小；

要確定文檔的總高度時(shí)，必須取得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

下面的函數(shù)會(huì)檢測(cè)元素是否位于頂部，如果不是就會(huì)將其自動(dòng)滾到頂部：

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

HTMLElement.offsetParent 是一個(gè)只讀屬性，返回一個(gè)指向最近的（closest，指包含層級(jí)上的最近）包含該元素的定位元素。如果沒(méi)有定位的元素，則 offsetParent 為最近的 table 元素對(duì)象或根元素（標(biāo)準(zhǔn)模式下為 html；quirks 模式下為 body）。當(dāng)元素的 style.display 設(shè)置為 "none" 時(shí)，offsetParent 返回 null。offsetParent 很有用，因?yàn)?offsetTop 和 offsetLeft 都是相對(duì)于其內(nèi)邊距邊界的。


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

btn.onclick = scrollToTop;

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

getBoundingClientRect()方法會(huì)返回一個(gè)矩形對(duì)象，包含4個(gè)屬性：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中，默認(rèn)坐標(biāo)從(2,2)開(kāi)始計(jì)算，導(dǎo)致最終距離比其他瀏覽器多出兩個(gè)像素，我們需要做個(gè)兼容。

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
    }

}