前端进阶-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);

        }

    }