返回列表

W3C DOM2样式规则

默认分类 2011-04-29 19:24:50

转载:http://www.jb51.net/article/23223.htm

W3C DOM2样式规则
==========================================================
CSSStyleSheet对象
     CSSStyleSheet对象表示的是所有CSS样式表,包括外部样式表和使用<style type="text/css"></style>标签指定的嵌入式样式表。
CSSStyleSheet同样构建于其他的DOM2 CSS对象基础之 上,而CSSStyleRule对象表示的则样式表中的每条规则。
        通过document.stylesheets属性可以取得文档中CSSStyleSheet对象的列表,其中每个对象有下列属性
        type                                始终为text/css
        disabled                        相应样式表是应于还是禁用于当前文档
        href                                样式表相对于当前文档的URL
        title                                分组样式标签
        media                         样式应用的目标设备类型(screen、print)
        ownerRule                 只读CSSRule对象,若样式用@import导入,表示其父规则
        cssRules                     只读cssRuleList列表对象,包含样式表中所有CSSRule对象
        ==========================================================
        insertRule(rule,index)                添加新的样式声明
        deleteRule(index)                     从样式表中移除规则
CSSStyleRule对象
        每个CSSStyleSheet对象内部包含着一组CSSStyleRule对象。这些对象分别对应着类似下面这样一条规则:
        boyd{
             font:lucida,verdana,sans-serif;
                background:#c7600f;
                color:#1a3800;
        }
CSSStyleRule对象具有下列属性:
        type                               继承自CSSRule对象的一个属性,以0~6中的一个数字表示规则类型
        cssText                          以字符串形式表示的当前状态下的全部规则
        parentStyleSheet            引用父CSSStyleRule对象
        parentRule                     如果规则位于另一规则中,该属性引用另一个CSSRule对象
        selectorText                   包含规则的选择符
        style                              与HTMLElement.style相似,是CSSStyleDeclaration对象的一个实例
CSSStyleDeclaration对象
        表示一个元素的style属性,与CSSStyleRule对象类似,CSSStyleDeclaration具有下面属性:
        cssText                以字符串形式表示的全部规则
        parentRule         将引用CSSStyleRule对象
        ==========================================================
        getPropertyValue(propertyName)                        CSS样式属性值
        removeProperty(propertyName)                         从声明中移除属性
        setProperty(propertyName,value,priority)         设置CSS属性值
把样式置于DOM脚本之外
=========================================================
style属性
        style属性本身是一个表示特定元素的所有不同CSS样式的CSSStyleDeclaration对象,通过style属性只能访问到在元素的style属性中以嵌入方式声明的CSS属性。换句话说,通过style属性无法访问到由多重样式表层叠而来或者从父元素继承的CSS属性。
代码如下:

element.style.backgroundColor = 'red';        //background-color被转换为大小写形式,必须的
//设置id为"example"的元素的样式
setStyleById('example',{
        'background-color'         :         'red',
        'border'                         :        '1px solid black',
        'padding'                         :        '1px',
        'margin'                            :        '1px'
});
function setStyle(elementid,styles){   
        var element = document.getElementById(elementid);
        //循环遍历styles对象并应用每个属性
        for(property in styles){
                //非styles直接定义的属性
                if(!styles.hasOwnProperty(property)) continue;
               
                if(element.style.setProperty){
                        element.style.setProperty(uncamlize(property, '-'), styles[property], null);
                } else {
                        element.style[camelize(property)] = styles[property];
                }
        }
       
        return true;
}
//将word-word转换为wordWord
function camelize(s) {
return s.replace(/-(\w)/g, function(math,p1){
return p1.toUpperCase();
});
}
//将wordWord转换为word-word
function uncamelize(s, sep) {
    sep = sep || '-';
    return s.replace(/([a-z])([A-Z])/g, function (match, p1, p2){
         return p1 + sep + p2.toLowerCase();
    });
}
//基于className切换样式
element.className += 'newclass';

访问计算样式
        在修改一个元素的表现之前,你可能希望首先确定它当前的样式属性,由于元素的style属性只适用于以嵌入式方式定义的样式,因此无法通过style取得计算样式,DOM2规范在document.defaultView中包含一个名叫getComputedStyle()的方法,该方法返回一个只读的CSSStyleDeclaration对象,包含特定元素的所有计算样式,如下:
代码如下:

        var styles = document.defaultView.getComputedStyle(element);
        var color = styles.getProperty('background-color');

但是Microsoft有自己的属性element.currentStyle版本
代码如下:

//取得一元素的计算样式
function getStyle(element,property) {
        var value = element.style[camelize(property)];
        if(!value) {
                if(document.defaultView && document.defaultView.getComputedStyle) {
                        value = document.defaultView.getComputedStyle(element).getPropertyValue(property);
                } else if(element.currentStyle) {
                        value = element.currentStyle[camelize(property)];
                 }
        }
        return value;
}