如何通过JavaScript API处理CSS

很多场景我们是需要借助JavaScript相关的API来帮助我们处理Web页面中的CSS。CSSOM（CSS Object Model）中提供了一些JavaScript的API处理CSS。除此之外，还可以通过JavaScript来操作DOM元素中的attribute、样式和类来操作CSS。由于JSX和无数JavaScript框架等概念的出现，使得JavaScript API与DOM交互变得越来越流行，但是对CSS使用类似的技术似乎变得没有那么多人关注。当然， CSS-in-JS解决方案是存在的，但是最流行的方案都是基于编译的，在生产中输出CSS时不需要任何额外的运行时。这当然对性能有好处，因为使用CSS API可能会导至额外的重游，这使得它和使用DOM API一样需要。但这并不是我们想要的。如果我告诉您，您不仅可以操作DOM元素的样式和CSS类，而且还可以创建完整的样式，就像使用HTML和JavaScript一样，那会怎么样呢？

在这一篇文章中，我们就来一起重新聊聊如何借助JavaScript相关的API来处理CSS。

CSS的使用方式

熟悉CSS的同学应该都知道，使用CSS有多种方式，常见的主要有：

行内样式：这是一种较老的方式，就是在DOM元素中通过style的属性来给元素设置样式。这是一种不好的使用习惯，会让你的样式难以维护和扩展。当然它并不是一无事处，在一些特殊的场景，行内样式会让你变得更为容易。大多数情况之下，都是通过JavaScript来给元素添加行内样式

CSS类：借助元素的类（class）来添加或删除样式，在Web中也是常见的，特别是在一些交互场景之下，会通过添加和删除类的方式来控制DOM元素的样式

样式表：大部分场景，样式都是以样式表来承载，这样更易于维护你的CSS，也更易于达到结构、表现和行为的相互分离

事实上，任何一个Web页面都可以看到HTML（DOM元素）、CSS和JavaScript三者的身影。

针对上述的相应的场景，JavaScript提供相应的API，可以更好的帮助CSSer操作CSS。让HTML，CSS和JavaScript结合在一起，做一些更有意思的事情。接下来，我们来看看JavaScript操作CSS提供了哪些API。

行内样式

在探索复杂的操作之前，我们先从简单的入手。

行内样式（也有人称之为内联样式）是显式的给DOM元素设置style的属性。这样一来，我们就可以通过修改DOM元素（即HTMLElement）的style属性的值，从而达到修改DOM元素的行内样式。

如果通过JavaScript相关的API来修改HTMLElement的行内样式，也有多种方式：

修改HTMLElement的style对象中对应的CSS属性

修改HTMLElement的style的cssText的值

借助DOM属性setAttribute()来修改HTMLElement的style