dom总结:DOM2和DOM3中样式部分

访问元素的样式

任何支持 style 特性的 HTML 元素在 JavaScript 中都有一个对应的 style 属性。这个 style 对象 是 CSSStyleDeclaration 的实例，包含着通过 HTML 的 style 特性指定的所有样式信息，但不包含 与外部样式表或嵌入样式表经层叠而来的样式。在 style 特性中指定的任何 CSS 属性都将表现为这个 style 对象的相应属性。对于使用短划线(分隔不同的词汇，例如 background-image)的 CSS 属性名，必须将其转换成驼峰大小写形式，才能通过 JavaScript 来访问。特殊:float对应属性是cssFloat(safari,chrome,Firefox,Opera)或者styleFloat.

html:
<div class="group">
    <div class="top">
        <div class="top-title" data-index="199">顶部标题</div>
        <div class="top-content">顶部内容顶部内容</div>
        <ul class="top-ul">
            <li>顶部第一行</li>
            <li>顶部第二行</li>
            <li style="color:red;" class="top-li">顶部第三行</li>
            <li style="color:blue;background-color:lightgrey;font-size: 19px;" class="top-lastLi">顶部第四行</li>
        </ul>
        <button class="btn">我是按钮</button>
    </div>
    <div class="bottom">
        <div class="bottom-title common-title">底部标题</div>
        <ul class="bottom-ul">
            <li>底部第一行</li>
            <li>底部第二行</li>
            <li>底部第三行</li>
            <li>底部第四行</li>
        </ul>
    </div>
</div>
js:
 var ele = document.querySelector(".top-lastLi");
 console.log(ele.style.backgroundColor);
 console.log(ele.style.color);
 console.log(ele.style.fontSize);
 //设置样式
 ele.style.width = "200px";

1.DOM 样式属性和方法

• cssText:style 特性中的 CSS 代码
• length:应用给元素的 CSS 属性的数量
• parentRule:表示 CSS 信息的 CSSRule 对象
• getPropertyCSSValue(propertyName):返回包含给定属性值的 CSSValue 对象(暂时没发现能用)
• getPropertyPriority(propertyName):如果给定的属性使用了!important 设置，则返回"important";否则，返回空字符串。
• getPropertyValue(propertyName):返回给定属性的字符串值。
• item(index):返回给定位置的 CSS 属性的名称。
• removeProperty(propertyName):从样式中删除给定属性。
• setProperty(propertyName,value,priority):将给定属性设置为相应的值，并加上优先权标志("important"或者一个空字符串)。

    //遍历style的属性名和值
    for(var i=0,len=ele.style.length;i<len;i++){
        var prop = ele.style.item(i);
        console.log(prop + ":" + ele.style.getPropertyValue(prop));
    }
    //删除某个style设置,恢复默认值
    ele.style.removeProperty("font-size");
    //获取css特性的优先权标志
    console.log(ele.style.getPropertyPriority("color"));

2.计算的样式

虽然 style 对象能够提供支持 style 特性的任何元素的样式信息，但它不包含那些从其他样式表 层叠而来并影响到当前元素的样式信息。“DOM2 级样式”增强了 document.defaultView，提供了 getComputedStyle()方法。这个方法接受两个参数:要取得计算样式的元素和一个伪元素字符串(例 如":after")。如果不需要伪元素信息，第二个参数可以是 null。getComputedStyle()方法返回一个 CSSStyleDeclaration 对象(与 style 属性的类型相同)，其中包含当前元素的所有计算的样式。

css:
    <style>
        .top-lastLi{
            color:orange;
            width:150px;
        }
    </style>
js:
    var ele = document.querySelector(".top-lastLi");
    console.log(ele.style.width);
    var computedStyle = document.defaultView.getComputedStyle(ele,null);
    console.log(computedStyle.width);
    console.log(computedStyle.fontSize);
    console.log(computedStyle.border);

所有计算的样式都是只读的;不能修改计算后样式对 象中的 CSS 属性。此外，计算后的样式也包含属于浏览器内部样式表的样式信息，因此任何具有默认值 的 CSS 属性都会表现在计算后的样式中,会因不同浏览器默认值而不同.
如果在IE中,没有getComputedStyle()方法,代替的是currentStyle属性,和style属性类似,只是它包括的是所有计算样式.

操作样式表

CSSStyleSheet 类型表示的是样式表，包括通过<link>元素包含的样式表和在<style>元素中定义的样式表。
CSSStyleSheet 继承自 StyleSheet，后者可以作为一个基础接口来定义非 CSS 样式表。从 StyleSheet 接口继承而来的属性如下:

• disabled:表示样式表是否被禁用的布尔值。这个属性是可读/写的，将这个值设置为 true 可以禁用样式表。
• href:如果样式表是通过<link>包含的，则是样式表的 URL;否则,是 null。
• media:当前样式表支持的所有媒体类型的集合。与所有 DOM 集合一样，这个集合也有一个 length 属性和一个 item()方法。也可以使用方括号语法取得集合中特定的项。如果集合是空列表，表示样式表适用于所有媒体。在 IE 中，media 是一个反映<link>和<style>元素 media
  特性值的字符串。
• ownerNode:指向拥有当前样式表的节点的指针，样式表可能是在 HTML 中通过<link>或<style/>引入的(在 XML 中可能是通过处理指令引入的)。如果当前样式表是其他样式表通过@import 导入的，则这个属性值为 null。IE 不支持这个属性。
• parentStyleSheet:在当前样式表是通过@import 导入的情况下,这个属性是一个指向导入它的样式表的指针。
• title:ownerNode 中 title 属性的值。
• type:表示样式表类型的字符串。对 CSS 样式表而言，这个字符串是"type/css"。

除了 disabled 属性之外，其他属性都是只读的。在支持以上所有这些属性的基础上， CSSStyleSheet 类型还支持下列属性和方法:

• cssRules:样式表中包含的样式规则的集合。IE 不支持这个属性，但有一个类似的 rules 属性。
• ownerRule:如果样式表是通过@import 导入的，这个属性就是一个指针，指向表示导入的规则;否则，值为 null。IE 不支持这个属性。
• deleteRule(index):删除 cssRules 集合中指定位置的规则。IE 不支持这个方法，但支持一个类似的 removeRule()方法。
• insertRule(rule,index):向 cssRules 集合中指定的位置插入 rule 字符串。IE 不支持这个方法，但支持一个类似的 addRule()方法。

    //获取样式表:包括<link>和<style>
    console.log(document.styleSheets);
    for(var i=0,len=document.styleSheets.length;i<len;i++){
        var sheet = document.styleSheets[i];
        console.log(sheet.disabled);
    }
    //取得第一个<link/>元素引入的样式表
    var link = document.getElementsByTagName("link")[0];
    console.log(link.sheet || link.styleSheet);

如果在style中import样式表进来，可以这样提取出来：

    <style>
        @import url(dom2.css);
        .top-lastLi{
            color:orange;
            width:150px;
        }
    </style>
js:
var sheet = document.styleSheets[0];
var rules = sheet.rules;
//这条规则是CSSImportRule的实例
var sheetRule = rules[0];
//通过styleSheet属性把import进来的样式表提取出来
var importSheet = sheetRule.styleSheet;

CSSRule 对象表示样式表中的每一条规则。实际上，CSSRule 是一个供其他多种类型继承的基类 型，其中最常见的就是 CSSStyleRule 类型，表示样式信息。CSSStyleRule 对象包含下列属性：

• cssText（常用）:返回整条规则对应的文本。由于浏览器对样式表的内部处理方式不同，返回的文本 可能会与样式表中实际的文本不一样;Safari 始终都会将文本转换成全部小写。IE 不支持这个属性。
• parentRule:如果当前规则是导入的规则，这个属性引用的就是导入规则;否则，这个值为 null。IE 不支持这个属性。
• parentStyleSheet:当前规则所属的样式表。IE 不支持这个属性。
• selectorText（常用）:返回当前规则的选择符文本。由于浏览器对样式表的内部处理方式不同，返回的文本可能会与样式表中实际的文本不一样(例如，Safari 3 之前的版本始终会将文本转换成全部小写 )。 在Firefox,chrome,safari和IE中这个属性是只读的 。Opera允许修改selectorText。
• style（常用）:一个 CSSStyleDeclaration 对象，可以通过它设置和取得规则中特定的样式值。
• type:表示规则类型的常量值。对于样式规则，这个值是 1。IE 不支持这个属性。

改/增/删样式表规则

    //增删改第一个样式表:
    
    var sheet = document.styleSheets[0];//取得样式表
    var rules = sheet.cssRules || sheet.rules;//取得规则列表
    console.log(rules);
    for(var i=0,len=rules.length;i<len;i++){
        console.log('整体：'+rules[i].cssText + '  选择器：'+rules[i].selectorText + '    样式：'+rules[i].style.cssText);
    }
    rules[0].style.color = "green";
    rules[0].style.backgroundColor = "lightgray";
    //增
    sheet.insertRule(".top-content {font-size:20px;color:blue;}",0);
    sheet.addRule(".top-content","color:red;",1);//主要针对IE
    function insertsRule(sheet,selectorText,cssText,position) {
        if(sheet.insertRule){
            sheet.insertRule(selectorText + "{" + cssText + "}", position);
        }
        else if(sheet.addRule){
            sheet.addRule(selectorText,cssText,position);
        }
    }
    insertsRule(sheet,".top-content","color:blue;",2);
    //如果要增加的规则不少，还是动态加载样式表方便

    //删
    sheet.deleteRule(3);
    sheet.removeRule(4);//主要针对IE

    //删和增规则慎用，影响大

元素大小

此处介绍的属性和方法并不属于“DOM2 级样式”规范，但却与 HTML 元素的样式息息相关。

偏移量

偏移量(offset dimension):包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小(注意，不包括外边距)。4个相关属性:

• offsetHeight:元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、(可见的) 水平滚动条的高度、上边框高度和下边框高度。
• offsetWidth:元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、(可见的)垂直滚动条的宽度、左边框宽度和右边框宽度。
• offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。
• offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。

而offsetParent属性就是对包含元素的引用(即定位父级),offsetParent 属性不一定与 parentNode 的值相等。offsetParent是指与当前元素最近的经过定位(position不等于static)的父级元素:

• 元素自身有fixed定位，offsetParent的结果为null
• 元素自身无fixed定位，且父级元素都未经过定位，offsetParent的结果为<body>
• 元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素
• <body>元素的parentNode是null

要想知道某个元素在页面上的偏移量，将这个元素的 offsetLeft 和 offsetTop 与其 offsetParent 的相同属性相加，如此循环直至根元素，就可以得到一个基本准确的值:

    function getElementLeft(element){
        var actualLeft = element.offsetLeft;
        var current = element.offsetParent;
        while (current !== null){
            actualLeft += current.offsetLeft;
            current = current.offsetParent;
        }
        return actualLeft;
    }

    function getElementTop(element) {
        var actualTop = element.offsetTop;
        var current = element.offsetParent;
        while (current !== null) {
            actualTop += current.offsetTop;
            current = current.offsetParent;
        }
        return actualTop;
    }
  注意:对于使用表格和内嵌框架布局的页面
       由于不同浏览器实现这些元素的方式不同，
       因此得到的值就不太精确了。

所有这些偏移量属性都是只读的，而且每次访问它们都需要重新计算。因此，应该尽量避免重复访问这些属性;如果需要重复使用其中某些属性的值，可以将它们保存在局部变量中，以提高性能。

客户区大小

元素的客户区大小(client dimension)，指的是元素内容及其内边距所占据的空间大小:

• clientWidth 属性是元素内容区宽度加上左右内边距宽度
• clientHeight 属性是元素内容区高度加上上下内边距高度

    //确定视口大小
    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());

与偏移量相似，客户区大小也是只读的，也是每次访问都要重新计算的

滚动大小

滚动大小(scroll dimension):指的是包含滚动内容的元素的大小。4个相关属性:

• scrollHeight:在没有滚动条的情况下，元素内容的总高度。
• scrollWidth:在没有滚动条的情况下，元素内容的总宽度。
• scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
• scrollTop:被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
  在确定文档的总高度时(包括基于视口的最小高度时)，必须取得 scrollWidth/clientWidth 和 scrollHeight/clientHeight 中的最大值，才能保证在跨浏览器的环境下得到精确的结果:

    var docHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);
    var docWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth);
注意，对于运行在混杂模式下的 IE，
     则需要用 document.body 代替 document.documentElement。

//回滚回顶部(尚未确定是否完全兼容)
    document.querySelector(".scroll-top").onclick = function () {
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
    };

总结:
height = 内容高度(获取:document.defaultView.getComputedStyle(element,null).height)
clientHeight = height + padding-top + padding-bottom
offsetHeight = height + padding-top + padding-bottom + border-top + border-bottom
scrollHeight = 内容的的真实高度(如果没有滚动的内容则等于clientHeight,如果有则是内容的全部高度)

确定元素大小

IE、Firefox 3+、Safari 4+、Opera 9.5 及 Chrome 为每个元素都提供了一个 getBoundingClientRect()方法。这个方法返回会一个矩形对象，包含 4 个属性:left、top、right 和 bottom。但是，浏览器的实现稍有不同。IE8 及更早版本认为文档的左上角坐 标是(2, 2)，而其他浏览器包括 IE9 则将传统的(0,0)作为起点坐标。因此，就需要在一开始检查一下位于 (0,0)处的元素的位置，在 IE8 及更早版本中，会返回(2,2)，而在其他浏览器中会返回(0,0)。

    function getBoundingClientRect(element){
        var scrollTop = document.documentElement.scrollTop;
        var scrollLeft = document.documentElement.scrollLeft;
        if (element.getBoundingClientRect){
            if (typeof arguments.callee.offset != "number"){
                var temp = document.createElement("div");
                temp.style.cssText = "position:absolute;left:0;top:0;"; document.body.appendChild(temp);
                arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop; document.body.removeChild(temp);
                temp = null;
            }
            var rect = element.getBoundingClientRect();
            var offset = arguments.callee.offset;
            return {
                left: rect.left + offset,
                right: rect.right + offset,
                top: rect.top + offset,
                bottom: rect.bottom + offset
            };
        } else {
            var actualLeft = getElementLeft(element);
            var actualTop = getElementTop(element);
            return {
                left: actualLeft - scrollLeft,
                right: actualLeft + element.offsetWidth - scrollLeft,
                top: actualTop - scrollTop,
                bottom: actualTop + element.offsetHeight - scrollTop
            }
        } }
注意:由于这里使用了arguments.callee，所以这个方法不能在严格模式下使用。