如何通过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

具体来看看代码：

const bodyEle = document.body

// 通过'.style.property'方式添加行内样式
bodyEle.style.backgroundColor = '#000'

// 通过'.style.cssText'方式添加行内样式
bodyEle.style.cssText = 'color: red'

// 通过`setAttribute('style', 'property: value')`方式添加行内样式
bodyEle.setAttribute('style', 'font-size: 1rem')

上面的代码向大家演示了修改行内样式的多种方式。不管是哪种方式，都们都有一个共性，即 通过JavaScript相应的API来修改 HTMLElement 元素的 style 。虽然手段不同，但达到的效果是一致的，不过在使用的细节上有所差异。

如果使用 HTMLElement.style 设置样式的话，对应的CSS属性名需要采用驼峰的方式，比如：

// 正确的方式
ele.style.borderColor = 'red'

// 不正确的方式
ele.style.border-color = 'red'

如果使用 .style 这种方式要给 HTMLElement 添加多个行内样式时，需要显式的书写多次：

bodyEle.style.backgroundColor = '#000'  // 添加`background-color`
bodyEle.style.borderColor = '#000'      // 添加`border-color`
bodyEle.style.borderWidth = '2px'       // 添加`border-width`

这种方式是一种低效而又冗余，甚至是难于维护的方式。事实上如果需要通过使用JavaScript的API给 HTMLElement 同时添加多个样式，除了给元素添加一个类名（后面会介绍）之外，还可以使用 .style.cssText = '' 这种方式或者使用 .setAttribute('style', '') 方式：

// 使用
bodyEle.style.cssText = 'background-color: red; color: green; font-size: 1rem'

// 或使用
bodyEle.setAttribute('style', 'font-size: 1rem;color: green; background-color: yellow')

请注意：不管使用上面哪种方式，都将完全重置HTMLElement元素的内联样式，因此需要在参数中包含所有需要的样式（甚至是以前未更改的样式）。

这是较为古老的使用方式，但随着浏览器的发展，我们可以使用JavaScript的一些新的API来达到同样的效果，比如 Object.assign() 给 HTMLelement.style 一次性添加多个行内样式：

Object.assign(bodyEle.style, {
    backgroundColor: '#f36', 
    margin: '20px', 
    border: '1rem solid green'
})

使用 Object.assign(HTMLElement.style, {}) 方式给 HTMLElement 添加行内样式和前面介绍的几种方式有所不同，该方式并不会覆盖 HTML