JavaScript DOM2和DOM3——“样式”的注意要点

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
    }

}