html中样式操作

在HTML中使用样式有三种方式,link引入、style中编写和元素中定义具体style。DOM2对这三种提供了一系列API,要确定是否可以使用这些方法,可以用以下代码判断:

var isSupportDom2CSS = document.implementation.hasFeature("CSS","2.0");
var isSupportDom2Css2 = document.implementation.hasFeature("CSS2","2.0");

访问元素的样式

  支持style的元素都会含有一个style的属性,这个属性石CSSStyleDeclaration的实例,包含着由元素里定义的所有css样式信息,但是不包含由style定义的css和外部引入的css规则。对于中间有短横的属性,如background-color,需把它转化为驼峰命名法,即backgroundColor。

  多数情况下都是这样转换的,唯一一个特殊的就是float,因为它是javascript的保留字,不能用作属性名,所以DOM2级样式规定该属性名应该是cssFloat,IE中用的是styleFloat。

<html>
    <head>
        <script type="text/javascript">
            window.onload = function(){
                var div = document.getElementsByTagName(div)[0];
                console.log(div.style.width);                         //20px
                console.log(div.style.height);                        //20px
                console.log(div.style.fontSize);                      //12px
            }
        </script>
    </head>
    <body>
        <div style="width:20px;height:20px;font-size:12px;"></div>
    </body>
</html>

DOM2级样式还为style对象定义了一系列属性和方法,这些属性和方法可以实现元素样式的读写功能,属性方法如下:

  cssText:访问style中的css代码;

      length:应用给元素的css属性的数量;

      getPropertyCSSValue(propertyName): 根据属性名字得到属性对象;

      getPropertyPriority(propertyName):根据属性名字得到属性的优先权,即是否使用了important

      getPropertyValue(propertyName):得到指定属性名字的属性值

      item(index):给定位置的css属性名称;

  以上只是一部分比较常用的属性方法。

  其中cssText可以读写当前元素的css样式,直接对cssText赋值就可以重写原有style。

  length和item的出现主要是为了遍历元素中所定义的style属性,当然,也可以用方括号来替换item来访问style,它们都取得的是css的属性名,然后用getPropertyValue来访问属性值,代码如下:

<html>
    <head>
        <script type="text/javascript">
            window.onload = function(){
                var div = document.getElementsByTagName(div)[0],val,prop,str=‘‘;
                for(var i = 0,len = div.style.length;i<len;i++){
                    prop = div.style.item(i);   //or div.style[i]
                    value = div.style.getPropertyValue(prop);
                    str += (prop + :  + value + ;);
                }
                console.log(str);
            }
        </script>
    </head>
    <body>
        <div style="width:20px;height:20px;font-size:12px;"></div>
    </body>
</html>
View Code

计算的样式

  虽然以上已经可以访问到style,但是不包含外部引用的样式,所以得到的不一定是页面中真正的样式。这里就可以使用计算以后的样式。DOM2级增强了document.defaultView,提供了getComputedStyle()方法,它返回一个CSSStyleDeclaration对象,其中包含当前元素所有计算后的样式,如下:

<html>
    <head>
        <style type="text/css">
            div{
                background-color: black;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var div = document.getElementsByTagName(div)[0],val,prop,str=‘‘,
                stylelist = document.defaultView.getComputedStyle(div,null);
                for(var i = 0,len = stylelist.length;i<len;i++){
                    prop = stylelist.item(i);   //or div.style[i]
                    value = stylelist.getPropertyValue(prop);
                    str += (prop +: + value + ;);
                }
                console.log(str);
            }
        </script>
    </head>
    <body>
        <div style="width:20px;height:20px;font-size:12px;"></div>
    </body>
</html>
View Code

  在IE中,不支持getComputedStyle,但是有个currentStyle属性,功能类似,即可以用div.currentStyle来返回计算后的样式。

操作样式表

 CSSStyleSheet类型表示的是样式表,包括通过style包裹的样式表和link引入的样式表,使用下面的代码可以看浏览器是否支持DOM2级样式表。

var supportDOM2StyleSheets = document.implementation.hasFeature(‘StyleSheets‘,‘2.0‘);

  这里主要介绍几个StyleSheet属性和方法:

     disabled:表示样式表是否被禁用的布尔值,可读写,设置为true后就会禁用该样式表。

     type:表示样式表类型的字符串,只读

     cssRules:样式表中包含的样式规则的集合,在IE中为rules

     deleteRule(index):删除cssRules集合中指定位置的规则,IE中用removeRule()

     insertRule(rule,index):在cssRules中指定位置添加规则,IE中用addRule()

 同样,在这里还是可以用length和item()来访问,看以下这个例子

 1 <html>
 2     <head>
 3         <style type="text/css">
 4             div{
 5                 background-color: black;
 6             }
 7         </style>
 8         <script type="text/javascript">
 9             window.onload = function(){
10                 var sheet = document.styleSheets[0],
11                 rules = sheet.cssRules || sheet.rules,
12                 rule = rules[0];
13                 console.log(rule.style.cssText);
14                 console.log(rule.style.backgroundColor);
15             }
16         </script>
17     </head>
18     <body>
19         <div style="width:20px;height:20px;font-size:12px;"></div>
20     </body>
21 </html>
View Code

 这里面又包括了一个CSSRule对象,它表示的是每一条规则,其中几个属性的意义如下:

     cssText:返回css规则文本

     selectorText:返回选择符文本

     style:里面是一个CSSStyleDeclaration对象,可以通过它得到规则中特定的键值对

 同时,可以通过insertRule方法插入规则,接受两个参数,分别是规则文本和插入规则的索引,例子如下:

sheet.insertRule("body {background:red;}",0);

在IE8及更早的版本以前,有一个类似的方法,叫addRule(),有两个必选参数,选择符文本、CSS样式信息和一个可选参数—插入规则位置,示例如下:

sheet.addRule(‘body‘,‘background:red;‘,0);

同样删除规则也是如此,一般为deleteRule,IE支持的是removeRule

function deleteRule(sheet,index){
    if(sheet.deleteRule){
        sheet.deleteRule(index);
    }else if(sheet.removeRule){
        sheet.removeRule(index);
    }
}

这样就可以兼容所有主流浏览器了,通过传入sheet和要删除的CSS规则的索引,就可以删除指定的规则了。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。