javascript 动态修改样式和层叠样式表代码

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;
}