cssRule那些事儿

• div.style.cssText返回内联样式，并且可以改变

<style>
    .main{width: 100px;height: 200px;background: red}
</style>
<div class="main" style="margin:10px"></div>
var el=document.querySelector('.main')
el.style.cssText//margin:10px

• getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。

用法：var style = window.getComputedStyle("元素", "伪类");
或者：document.defaultView.getComputedStyle("元素", "伪类")

• 在ie中用currentStyle属性

var computedStyle=mydiv.currentStyle

操作样式表

• document.styleSheets返回StyleSheetList {0: CSSStyleSheet, length: 1}

• 通过style或者sheet取得CSSStyleSheet

var link=document.getElementsByTagName('link')[0];
function getStyleSheet(element){
    return element.sheet||element.styleSheet
}

• css规则

var sheet=document.styleSheets[1];//这个下还有addRule，deleteRule,insertRule("body{background-color:silver}",0)等方法
var rules=sheet.cssRules||sheet.rules;
var rule=rules[0];
console.log(rule)//
/*
CSSStyleRule {selectorText: ".main", style: CSSStyleDeclaration, type: 1, cssText: ".main { width: 100px; height: 200px; background: red; }", parentRule: null…}
cssText:".main { width: 100px; height: 200px; background: red; }"
parentRule:null
parentStyleSheet:
CSSStyleSheet
selectorText:".main"
style:
CSSStyleDeclaration
type:1
__proto__:
CSSStyleRule
*/
console.log(rule.style.width)//100px