js添加样式的方法

在JavaScript中添加样式主要有以下几种方法：

一、直接修改元素的内联样式

1. 基础概念
   • 每个HTML元素都有一个style属性，通过这个属性可以直接设置元素的CSS样式。这种方式设置的样式是内联样式，会覆盖外部样式表和内部样式表中的相同属性设置。

• 示例代码
• 示例代码
• 优势
  • 简单直接，可以快速地改变单个元素的样式而不影响其他元素。
  • 可以动态地根据用户的交互或者其他条件来改变样式。
• 应用场景
  • 当需要对某个特定元素进行即时样式调整时，比如在点击按钮时改变按钮的颜色以表示被按下状态。

二、通过添加/移除类名来控制样式（推荐方法）

1. 基础概念
   • 定义好CSS类，然后在JavaScript中通过操作元素的classList属性来添加或移除这些类名。这种方式遵循了结构（HTML）、样式（CSS）和行为（JavaScript）分离的原则，使代码更易于维护。

• 示例代码
• 示例代码
• 示例代码
• 优势
  • 保持HTML、CSS和JavaScript的分离，代码结构更清晰。
  • 可以方便地批量修改元素的样式，因为一个类可能包含多个样式属性。
  • 易于复用样式，多个元素可以共享相同的类名对应的样式。
• 应用场景
  • 当需要对一组元素进行相同的样式切换时，例如在导航菜单中切换当前选中菜单项的样式。

三、操作CSSStyleSheet对象（高级用法）

1. 基础概念
   • 在JavaScript中可以访问文档的样式表对象，然后通过操作样式表中的规则来改变样式。这需要对CSSOM（CSS对象模型）有一定的了解。

• 示例代码
• 示例代码
• 优势
  • 可以全局地修改样式，不需要针对每个元素进行操作。
  • 对于一些需要动态生成大量样式规则的场景比较有用。
• 应用场景
  • 当需要根据用户设置或者设备特性动态地调整整个页面的样式主题时。