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

153 阅读 0 评论 101 点赞

我是靠谱客的博主如意学姐，最近开发中收集的这篇文章主要介绍javascript 动态修改样式和层叠样式表代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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