原生JS操作CSS样式

为了使得页面上的元素能够随着用户的操作而“动”起来,我们常常需要用JS去操作一些元素的CSS样式,最简单的如隐藏、显示。

摆脱jQ库,我们现在用原生的JS来操作CSS样式。

行内样式(可读可写)

CSS属性                              JS调用

color                                   style.color

font-size                            style.fontSize

float                                   style.cssFloat(IE9+)   style.styleFloat(IE,其中在Edge下无效)    style.float均支持

…..

注:写时,有单位的,也得带上。

操作单个行内样式十分的简单,只需取出需要改的DOM元素,在使用style.加属性对应的CSS名字就行,如果属性名是复合的,只要改成驼峰命名发就行了。

操作整个行内样式:

style.cssText   // 获取整个行内样式(字符串形式),注:赋值时是以覆盖这种形式的。
style.length     // 行内样式的个数 (IE9+)
style.removeProperty('background-color')  // 移除css属性(IE9+)
style.setProperty('background-color', 'blue') // 设置css属性(IE9+)

注:以上两个方法在IE9下不报错,但是没效果。

计算后的样式(只读)

W3C标准:window.getComputedStyle(”, null).样式      (IE9+)        第一个参数是DOM对象,第二个参数是伪类,无则null

IE:对象.currentStyle.样式 (IE8-)

这些方法获得的CSS的值都是浏览器计算后的值,所以是不可以赋值的。

内联样式和外联样式

CSSStyleSheet集合

document.styleSheets  // styleSheetList集合    该属性会获得所有style元素和link元素(必须含有rel="styleSheet")
document.styleSheets[0]  // CSSStyleSheet  我们需要的对象,可以对CSSStyleSheet进行CSS的操作。

还有其他的方法可以获得页面中的CSSStyleSheet :

document.getElementsByTagName('link')[0] // HTMLLinkElement  (IE8+)
document.getElementsByTagName('style')[0] // HTMLLinkElement  (IE8+)

W3C标准:HTMLLinkElement对象和HTMLLinkElement对象后调用sheet属性会得到CSSStyleSheet(IE9+)

document.getElementsByTagName('link')[0].sheet     //  CSSStyleSheet
document.getElementsByTagName('style')[0].sheet    //  CSSStyleSheet

IE下:需要使用styleSheet属性(IE10-)

document.getElementsByTagName('link')[0].styleSheet     //  CSSStyleSheet
document.getElementsByTagName('style')[0].styleSheet    //  CSSStyleSheet

到这,我们已经使用了两种方法获得了CSSStyleSheet对象了。

在CSSStyleSheet对象下,有几个比较常用的属性和方法。当然这还是得区分IE和W3C的。

W3C的属性和方法:(IE9+)

  • disabled               // 获取或设置样式表是否被禁用
  • type                      // 获取样式表的种类    (设置时不报错,但无效)
  • media                  // 获取样式表的媒体类型  (设置时不报错,但无效)
  • cssRules             // CSSStyleList集合,样式规则集合
  • ownerRule         // @import导入时,指向表示导入的规则
  • deleteRule(index)  //  删除集合中指定的规则 (index是规则序号)
  • insertRule(rule, index)  // 向集合中添加指定的规则
// 删除第一个link标签(rel="stylesheet")下的第一个样式规则,在删除之后,所有的规则的序号就前移了一个。
document.getElementsByTagName('link')[0].sheet.deleteRule(0) ;
// 在第三个规则之后增加一个规则
document.getElementsByTagName('link')[0].sheet.insertRule('#box{background-color:blue}', 3);

IE下的属性和方法:(IE8-)

  • disabled   // 获取或设置样式表是否被禁用
  • rules         // CSSStyleList集合,样式规则集合
  • removeRule(index) //  删除集合中指定的规则 (index是规则序号)
  • addRule(selector, rule, index)  // 向集合中添加指定的规则
// 删除第一个link标签(rel="stylesheet")下的第一个样式规则
document.getElementsByTagName('link')[0].styleSheet.removeRule(0);
// 在第三个规则后增加一个规则
document.getElementsByTagName('link')[0].styleSheet.addRule('#box', 'background-color:blue', 3);

 

CSSStyleList集合

在CSSStyleSheet上调用cssRules或rules属性后,我们就可以得到样式规则集合,CSSStyleList集合,集合中的值是CSSStyleRule对象。其中,CSSStyleList集合是一个含length的对象。

对于CSSStyleRule对象,有几个常用的属性:

  • cssText           //  获取当前整个规则对应的文本 (rules不支持)
  • selectorText  //  获取当前规则的选择器文本
  • style                // 返回CSSStyleDeclaration对象,可以像操作行内样式一样操作对应的那条规则(有cssText属性,同行内)

注:在chrome下操作CSSStyleRule对象时,当对link标签下的规则操作时,需要在本地启动服务器,应该是chrome下的安全策略吧。且在新版的chrome下(版本 50.0.2661.87),rules和cssRules是都支持的,且一致。

发表评论