原生JS操作CSS样式

2016年09月11日Web前端0

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

行内样式（可读可写）

js操作CSS属性

style.color             // 获取color属性
style.fontSize          // 获取font-size属性
style.cssFloat(IE9+)    // float属性
style.styleFloat(IE，其中在Edge下无效)  // float 属性
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是都支持的，且一致。

CSSJavaScript

目录