oDiv.style //返回的是一个对象
返回的是设置的style样式
作用：用来设置值
# 例如
style="width:100px;height:100px;border-color:#fff"
console.log(oDiv.style.width); //100px
console.log(oDiv.style.borderColor) //#fff
oDiv.style.borderLeftColor;
oDiv.style.border = '1px solid red';
oDiv.style.backgroundColor; //颜色值FF返回的始终是RGB
oDiv.style.cssText; //返回浏览器设置的style[结果是浏览器渲染后的结果]
Div.style.cssText="width:20px;height:10px;display:bolck"; //把多个样式进行合并提高了浏览器渲染的效率
实际的样式
# IE
oDiv.currentStyle
oDiv.currentStyle.width;
oDiv.currentStyle.height;
# W3C
getComputedStyle(oDiv, null); //null没有实现
getComputedStyle(oDiv, null).width
getComputedStyle(oDiv, null).borderLeftColor; //复合属性要写的详细些
getComputedStyle(oDiv, null).backgroundColor;
document.styleSheets
说明:样式文件的伪数组
属性：
type:text/css
href:链接地址
cssText(IE):样式表中规则的文本形式
rules(IE),
cssRules(W3C):对应样式表里所有规则的集合[都是数组的形式]
Rule对象属性:
selectText:选择符
style,可以读取和设置CSS规则，并且由cssText属性和内联样式的方式一样
rules[ruleIndex].style.width;
rules[ruleIndex].style.width = "500px"; //样式比较隐蔽，查看代码是看不出来的
修改样式表
# FF:insertRule(cssText, cssIndex);
document.styleSheets[0].insertRule("body{color:blue;}", 1);
# IE:addRule(selector, cssText, cssIndex);
document.selector[0].addRule("body", "color:blue", 1);
# FF:deleteRule(cssIndex)
document.styleSheets[0].deleteRule(1);
# IE:removeRule(cssIndex)
document.styleSheets[0].removeRule(1);
特殊的属性值
# float
element.style.cssFloat //W3C
element.style.styleFloat //IE
获取css样式
// ie8
el.currentStyle[attrName]
// ie9+
window.getComputedStyle(el)[attrName]
// 伪类
window.getComputedStyle(el , ":after")[attrName];
