js如何添加一个css样式

在 javascript 中添加 css 样式有三种方法：使用 classlist 属性添加或删除 css 类。直接修改元素的 element.style 对象。使用 setattribute() 方法设置元素的属性，包括 css 类。

如何在 JavaScript 中添加 CSS 样式

在 JavaScript 中，可以通过修改 DOM （文档对象模型）来添加 CSS 样式。

方法 1：使用 classList

使用 classList 属性可以添加或删除 CSS 类：

// 添加类
element.classList.add('my-class');
// 删除类
element.classList.remove('my-class');

方法 2：使用 element.style 对象

element.style 对象允许直接修改元素的内联样式：

// 设置内联样式
element.style.color = 'red';
// 设置多个内联样式
element.style.<a style="color:#f60; text-decoration:underline;" href="https://www.codesou.cn/" target="_blank">css</a>Text = 'color: red; font-size: 20px;';

方法 3：使用 setAttribute()

setAttribute() 方法可以设置元素的属性，包括 CSS 类：

// 设置类属性
element.setAttribute('class', 'my-class');

选择元素

在使用上述方法之前，需要首先选择要修改样式的元素。可以使用以下选择器：

• getElementById()：根据元素的 ID 选择
• getElementsByClassName()：根据元素的类名选择
• getElementsByTagName()：根据元素的标签名选择

提示

• 确保选择的元素存在于 DOM 中，否则会导致错误。
• 使用 classList 添加或删除类时，空格很重要。
• 使用 element.style 时，属性名称应使用驼峰命名法（例如 fontSize 而不是 font-size）。