使用JS来动态操作CSS,你知道几种方法?

（给前端大学加星标，提升前端技能.）

译者：前端小智

https://segmentfault.com/a/1190000021169316

JavaScript 可以说是交互之王，它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集，更加丰富界面交互的可操作性。这类 API 的例子包括WebGL API、Canvas API、DOM API，还有一组不太为人所知的 CSS API。

由于JSX和无数JS框架的出现，使通过JS API与DOM交互的想法真正流行起来，但是在 CSS 中使用类似技术似乎并没有很多。 当然，存在像CSS-in-JS这类解决方案，但是最流行的解决方案还是基于转译(transpilation)，无需额外运行即可生成 CSS。 这肯定对性能有好处，因为CSS API的使用可能导致额外的重绘，这与DOM API的使用一样。 但这不是咱们想要的。 如果哪天公司要求咱们，既要操纵 DOM 元素的样式和 CSS 类，还要像使用 HTML 一样使用 JS 创建完整的样式表，该怎么办？

内联样式在咱们深入一些复杂的知识之前，先回来顾一下一些基础知识。例如，咱们可以通过修改它的.style属性来编辑给定的HTMLElement的内联样式。

const el = document.createElement('div')
el.style.backgroundColor = 'red'// 或者el.style.cssText = 'background-color: red'// 或者el.setAttribute('style', 'background-color: red')

直接在.style对象上设置样式属性将需要使用驼峰式命名作为属性键，而不是使用短横线命名。 如果咱们需要设置更多的内联样式属性，则可以通过设置.style.cssText属性，以更加高效的方式进行设置 。请记住，给cssText设置后原先的css样式被清掉了，因此，要求咱们一次死一堆样式 。如果这种设置内联样式过于繁琐，咱们还可以考虑将.style与Object.assign()一起使用，以一次设置多个样式属性。

// ...Object.assign(el.style, {    backgroundColor: "red",    margin: "25px"})

这些“基本知识”比咱们想象的要多得多。.style对象实现CSSStyleDeclaration接口。 这说明它带还有一些有趣的属性和方法，这包括刚刚使用的.cssText，还包括.length（设置属性的数量），以及.item()、.getPropertyValue()和.setPropertyValue()之类的方法：

// ...const propertiesCount = el.style.lengthfor(let i = 0; i < propertiesCount; i++) {    const name = el.style.item(i) // 'background-color'    const value = el.style.getPropertyValue(name) // 're'    const priority = el.style.getPropertyPriority(name) // 'important'    if(priority === 'important') {        el.style.removeProperty()    }}

这里有个小窍门-在遍历过程中.item()方法具有按索引访问形式的备用语法。

// ...el.style.item(0) === el.style[0]; // true

CSS 类

接着，来看看更高级的结构——CSS类，它在检索和设置时具有字符串形式是.classname。

// ...el.className = "class-one class-two";el.setAttribute("class", "class-one class-two");

设置类字符串的另一种方法是设置class属性（与检索相同）。 但是，就像使用.style.cssText属性一样，设置.className将要求咱们在字符串中包括给定元素的所有类，包括已更改和未更改的类。当然，可以使用一些简单的字符串操作来完成这项工作，还有一种就是使用较新的.classList属性，这个属性，IE9 不支持它，而 IE10 和 IE11 仅部分支持它。classlist属性实现了DOMTokenList，有一大堆有用的方法。例如.add()、.remove()、.toggle()和.replace()允许咱们更改当前的 CSS 类集合，而其他的，例如.item()、.entries()或.foreach()则可以简化这个索引集合的遍历过程。

// ...const classNames = ["class-one", "class-two", "class-three"];classNames.forEach(className => {    if(!el.classList.contains(className)) {        el.classList.add(className);    }});

Stylesheets

一直以来，Web Api 还有一个StyleSheetList接口，该接口由document.styleSheets属性实现。 document.styleSheets 只读属性，返回一个由 StyleSheet 对象组成的 StyleSheetList，每个 StyleSheet 对象都是一个文档中链接或嵌入的样式表。

for(styleSheet of document.styleSheets){    console.log(styleSheet);}

通过打印结果咱们可以知道，每次循环打印的是 CSSStyleSheet 对象，每个 CSSStyleSheet 对象由下列属性组成：

属性	描述
media	获取当前样式作用的媒体。
disabled	打开或禁用一张样式表。
href	返回 CSSStyleSheet 对象连接的样式表地址。
title	返回 CSSStyleSheet 对象的title值。
type	返回 CSSStyleSheet 对象的type值，通常是text/css。
parentStyleSheet	返回包含了当前样式表的那张样式表。
ownerNode	返回CSSStyleSheet对象所在的DOM节点，通常是或