js里面怎么写css样式

在JavaScript中写CSS样式有多种方式：

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

1. 基础概念
   • 内联样式是直接在HTML元素的style属性中定义的样式。通过JavaScript获取元素并设置其style属性的值，可以动态地改变元素的样式。

• 示例代码
  • 假设HTML中有一个<div>元素：
  • 假设HTML中有一个<div>元素：
  • 在JavaScript中可以这样修改它的样式：
  • 在JavaScript中可以这样修改它的样式：
• 优势
  • 简单直接，可以快速地针对单个元素改变样式，不需要额外的CSS选择器匹配过程。
• 应用场景
  • 当需要根据用户的交互（如点击按钮改变某个元素的样式）或者根据动态数据（如根据从服务器获取的值来设置元素颜色）对单个元素进行样式调整时非常有用。

二、操作CSS类名

1. 基础概念
   • 定义好CSS类，然后在JavaScript中为元素添加、删除或切换这些类名，从而改变元素的样式。

• 示例代码
  • 首先定义CSS类：
  • 首先定义CSS类：

.highlight { background-color: green; color: white; }

- HTML元素：
```html
<p id="myParagraph">这是一段文字。</p>

• JavaScript操作：

const myParagraph = document.getElementById('myParagraph');
myParagraph.classList.add('highlight');
// 如果要移除类名
// myParagraph.classList.remove('highlight');
// 如果要在有和没有类名之间切换
// myParagraph.classList.toggle('highlight');

1. 优势
   • 代码结构更清晰，将样式定义和JavaScript逻辑分离，在需要对多个元素应用相同样式变化时更方便管理。

• 应用场景
  • 实现导航菜单的展开/收起效果（切换类名来改变样式），或者在响应式设计中根据窗口大小为元素添加或移除特定的类名。

三、使用CSSStyleSheet对象（高级用法）

1. 基础概念
   • 可以直接操作文档中的<style>标签或者外部CSS文件加载后的样式表对象，添加新的CSS规则或者修改现有的规则。

• 示例代码
  • 对于内联<style>标签：
  • 对于内联<style>标签：
  • JavaScript操作：
  • JavaScript操作：
  • 这里insertRule方法的第一个参数是要添加的CSS规则，第二个参数是新规则插入的位置（通常是cssRules.length表示添加到最后）。
• 优势
  • 可以批量修改样式规则，对于需要对整个页面样式进行大规模动态调整的情况很有用。
• 应用场景
  • 主题切换功能，当用户切换网站主题时，可以通过修改样式表中的规则来改变整个页面的颜色、字体等样式。