如何通过JavaScript API处理CSS

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

很多场景我们是需要借助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的行内样式,也有多种方式:

  • 修改HTMLElementstyle对象中对应的CSS属性
  • 修改HTMLElementstylecssText的值
  • 借助DOM属性setAttribute()来修改HTMLElementstyle

具体来看看代码:

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

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/messing-with-css-through-its-javascript-api.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部