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>
计算的样式
虽然以上已经可以访问到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>
在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>
这里面又包括了一个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规则的索引,就可以删除指定的规则了。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。