前端进阶Style

1.获取元素的实际的CSS层叠最后的样式(currentStyle、getComputedStyle)

    alert(oDiv.currentStyle.width);//IE，currentStyle保留原来定义在CSS中的单位
    alert(window.getComputedStyle(oDiv,null).width);//W3C DOM,并且总是返回计算后的像素值
    //另外，两种方式都不能获取那些CSS简写方式定义的，下面两个都会输出空
    alert(oDiv.currentStyle.background);
    alert(getComputedStyle(oDiv,null).border);

Cross-Browser 获取元素实际样式的方式

    function getStyle(obj,cn) {
        if (window.getComputedStyle) {//W3C DOM
            return window.getComputedStyle(obj,null)[cn];
        } else if (obj.currentStyle) {//IE
            return obj.currentStyle[cn];
        }
        return "";
    }

2.添加样式表

    //使用添加节点的方法
    var lnk = document.createElement("link");
    lnk.type="text/css";
    lnk.rel="styleSheet";
    lnk.href="test.css";
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(lnk);
    //在IE下不能使用innerHTML向head中添加HTML代码的方式
    //另一种方法就是使用document.write
    document.write("");

3.访问样式表

    alert(document.styleSheets);//document对象的styleSheets属性是一个包含了所有的样式表的伪数组
    var sheets = docuemtn.styleSheets;
    alert(sheets.length);//length报告了样式表的个数
    //style标签出现一次或使用link标签链入CSS一次就算作一个样式表对象
    var sheet1 = sheets[0];//可以使用下标来访问

　　样式表对象的属性

• type，一般都为text/css
• href，link标签为其href属性，而style标签则为空
• id，所属标签的ID
• disabled，样式表是否启用，启用时为false
• cssText(仅IE)，样式表中规则的文本形式
• owningElement(IE)，ownerNode(W3C DOM)，返回引入样式表的那个标签
• rules(IE),cssRules(W3C)，对应样式表里所有规则的集合

4.操作样式表中的样式

    var sheet = document.styleSheets[0];
    sheet.insertRule("body {color:blue;}",1);//W3C方法,第一个参数为CSS文本,第二个参数为位置,从0开始计数
    sheet.addRule("body","color:blue;",1);//IE方法,第一个参数为CSS选择符,第二个为CSS内容,第三个为位置
    //而要删除某条规则，则只能通过下标
    sheet.removeRule(1);//IE
    sheet.deleteRule(1);//W3C

    //Cross-Browser 总结函数
    function addCSS(sheet,selectorText,declarations,index) {
        if (sheet.insertRule) {
            sheet.insertRule(selectorText+" {"+declarations+"}",index);
        } else if (sheet.addRule) {
            sheet.addRule(selectorText,declarations,index);
        }
    }
    function delCSS(sheet,index) {
        if (sheet.deleteRule) {
            sheet.deleteRule(index);
        } else {
            sheet.removeRule(index);
        }
    }