网站开发进阶（六十）：Javascript追加style样式

川长思鸟来 2022-11-12 12:54 192阅读 0赞

## 前言 ##

在前端开发过程中，会遇到`js`实现业务逻辑的时候代码式追加元素样式的应用场景。

## 思路 ##

1、通过拼接`cssText`方式实现。

2、通过设置`class`，累加设置`class`方式实现 。

## 代码示例 ##

1、第一种方式可以应用下面函数实现，`el`表示待追加样式的`dom`节点，`strCss`表示待追加的样式。

2、第二种方式把样式定义成`class`，`element`表示待追加样式的`dom`节点，`value`表示`class`名称。

## 拓展阅读 ##

*  《[Vue进阶（幺陆捌）：前端用户体验提升（三）应用vw/vh实现自定义布局][Vue_vw_vh]》
 *  《[Vue进阶（幺柒零）：前端用户体验提升（四）应用rem/em实现字体自适应][Vue_rem_em]》
 *  《[Vue进阶（幺柒幺）：前端用户体验提升（五）Flex实现弹性布局][Vue_Flex]》
 *  《[Vue进阶（幺柒伍）：前端用户体验提升（六）色彩搭配][Vue]》

[Vue_vw_vh]: https://shq5785.blog.csdn.net/article/details/113987631
[Vue_rem_em]: https://shq5785.blog.csdn.net/article/details/113986978
[Vue_Flex]: https://shq5785.blog.csdn.net/article/details/113975864
[Vue]: https://shq5785.blog.csdn.net/article/details/114116539