菲娱国际娱乐:javascript 动态修改样式和层叠样式

时间: 作者:解质

  

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

  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) {   (责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | js代码 | jQuery特效 | 其他代码 | 关于我们

Copyright © 2010-2019 菲娱国际平台 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 菲娱国际平台