w3c dom2样式规则
==========================================================
cssstylesheet对象
　 cssstylesheet对象表示的是所有css样式表，包括外部样式表和使用标签指定的嵌入式样式表。
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;
}