惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

The Last Watchdog
The Last Watchdog
博客园_首页
Martin Fowler
Martin Fowler
S
SegmentFault 最新的问题
美团技术团队
小众软件
小众软件
V
V2EX
博客园 - Franky
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
The GitHub Blog
The GitHub Blog
Microsoft Security Blog
Microsoft Security Blog
Attack and Defense Labs
Attack and Defense Labs
S
Security Affairs
Simon Willison's Weblog
Simon Willison's Weblog
I
Intezer
T
The Exploit Database - CXSecurity.com
有赞技术团队
有赞技术团队
S
Schneier on Security
人人都是产品经理
人人都是产品经理
Security Archives - TechRepublic
Security Archives - TechRepublic
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
K
Kaspersky official blog
PCI Perspectives
PCI Perspectives
AI
AI
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
罗磊的独立博客
O
OpenAI News
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
The Register - Security
The Register - Security
V
Vulnerabilities – Threatpost
GbyAI
GbyAI
博客园 - 【当耐特】
C
Cisco Blogs
大猫的无限游戏
大猫的无限游戏
Help Net Security
Help Net Security
Google DeepMind News
Google DeepMind News
S
Securelist
Application and Cybersecurity Blog
Application and Cybersecurity Blog
P
Proofpoint News Feed
博客园 - 三生石上(FineUI控件)
雷峰网
雷峰网
L
LangChain Blog
SecWiki News
SecWiki News
博客园 - 叶小钗
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
V2EX - 技术
V2EX - 技术
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
J
Java Code Geeks
L
LINUX DO - 热门话题
Cisco Talos Blog
Cisco Talos Blog

博客园 - 大老鼠

JQuery ajax 传递数组 自定义属性 JQuery元素坐标,偏移量 IE8按F12不显示开发人员工具窗口 JQuery AJAX调用WEB SERVICE方法 JQuery Validate验证表单元素 - 大老鼠 - 博客园 序列化/反序列化JSON sqlserver使用select加锁 jQuery操作解析JSON (sp_dbcmptlevel)将某些数据库行为设置为与指定的 SQL Server 版本兼容。 jQuery使用手册 效果-为操作添加艺术性 DOM操作-基于命令改变页面 事件 选择符-取得你想要的一切 jQuery入门 DOM2核心和DOM2 HTML 创建可重用的对象 JavaScript中常见陷阱 - 大老鼠 - 博客园
动态修改样式和层叠样式表 - 大老鼠 - 博客园
大老鼠 · 2010-04-26 · via 博客园 - 大老鼠

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

访问计算样式
  在修改一个元素的表现之前,你可能希望首先确定它当前的样式属性,由于元素的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;
}