DOM样式

样式

1.访问元素样式

js和html中的style是CSSStyleDeclaration实例
float属性名IE用styleFloat,DOM2用cssFloat
混杂模式可以识别不带单位的，标准模式必须加单位

(1) DOM样式属性和方法

属性方法名	描述
cssText	访问到style的css,会覆盖之前所有属性,ie不支持
length
parentRule
getPropertyCSSValue(propertyName)	返回cssValue对象，包括cssText和cssValueType
cssValue	0继承 1基本 2自定义
getPropertyValue	返回值为属性值字符串表示
getPropertyPriority(propertyName)	有importent得到important
item(index)	返回给定位置的css属性
removeProperty(pname)	移除相当于使用默认属性
setProperty(pname, value, priority)	参数3可传空字符串

(2) 计算的样式
getComputedStyle() 包括层叠来的样式
border等综合属性不会返回值 chrome可以返回
alert(computedStyle.backgroundColor); //火狐rgb ie:red

        //ie9+其它
var computedStyle = document.defaultView.getComputedStyle(mydiv, null);
//ie8-
var computedStyle = mydiv.currentStyle;
var computedStyle = mydiv.currentStyle || document.defaultView.getComputedStyle(mydiv, null);

2.操作样式表

    stylesheet 只读接口

    //document.styleSheets 得到样式表集合
    //element.styleSheet | sheet   单个样式表
    var sheet = null;
    for (var i=0, len = document.styleSheets.length; i < len; i++) {
        sheet = document.styleSheets[i];
        alert(sheet.href);   //link包含的 返回href
    }   
    //得到单个元素样式表
    function getStyleSheet(element) {
        return element.sheet || element.styleSheet;
  }

属性	描述
href	link的
media	不懂
ownerNode	ie没有， 指向link 如果是@import,该属性为空
title	ownerNode的title
type	样式表样式类型 “type/css”
parentStyleSheet	@import导入的 指向的指针
其它-deleteRule(index)/ IE-removeRule	删除cssRules数组指定位置的规则
其它-insertRule(index)/IE-addRule	添加

            //其它
            <link rel="stylesheet" />
            //ie
            <link rel="alternate stylesheet" />

    (1) css规则  样式表的每一条 CSSStyleRule对象

规则属性	描述
cssText
parentRule	导入规则才有值
parentStyleSheet	所属样式表
selectorText	选择符文本
style	当前规则的CSSStyleDeclaration对象，可操作样式

【注】cssText 和 style.cssText : 前者包含选择文本和花括号，后者只包含样式信息
前者只读 后者可重写

    var sheet = document.styleSheets[0];
    var rules = sheet.cssRules || sheet.rules; //其它域ie
    var rule = rules[0];  //可使用以上属性验证

    //跨浏览器添加规则
    function insertRule(sheet, selectorText, cssText, position){
        if (sheet.insertRule) {
            sheet.insertRule(selectorText + "{" + cssText + "}", position);
        }else if (sheet.addRule) {
            sheet.addRule(selectorText, cssText, position);
        }
    }
    //调用
    insertRule(document.styleSheets[0], "body", "background-color: red", 0);

    //跨浏览器删除
    function deleteRule(sheet, index){
        if (sheet.deleteRule) {         //dom
            sheet.deleteRule(index);
        }else if (sheet.removeRule) {   //ie
            sheet.removeRule(index);
        }
    }

    deleteRule(sheet, 0);