JavaScript DOM：更改样式和类

Javascript教程 • 2025-10-21

网站不仅仅是内容。它的外观和对用户操作的响应方式创造了真正的体验。在 JavaScript 中，文档对象模型 (DOM)充当 HTML    结构与可更改它的脚本之间的桥梁。通过学习如何操作样式和类，您可以让页面变得生动活泼；无论是在明暗模式之间切换、突出显示活动链接，还是在点击时为元素添加动画效果。

本指南专为希望获得有关使用 JavaScript 更改样式和类别的清晰实用介绍的初学者而设计。

您将学到什么

到最后，你会明白：

  • 如何在应用更改之前选择 HTML 元素。

  • 如何classList添加、删除、切换和替换类。

  • 如何直接使用 JavaScript 应用内联样式。

  • 如何更新动态主题的 CSS 变量（自定义属性）。

  • 保持代码简单、可访问和可维护的最佳实践。

选择要设置样式的元素

在更改任何内容之前，您需要选择它。

HTML源代码：

Toggle Theme
Hello World

JavaScript源代码：

const button = document.getElementById('toggleBtn');
const card = document.querySelector('#feature');

这为 JavaScript 提供了一个可用的“句柄”。如果不选择，就无法设置样式。

换班classList（最佳方式）

最简单、最可靠的元素样式设置方法是切换类。这样可以保留所有设计规则到 CSS 中。

示例

card.classList.add('highlight'); // add a style
card.classList.remove('hidden'); // remove a style
card.classList.toggle('active'); // turn a class on/off
card.classList.replace('old', 'new'); // swap classes

为什么使用类而不是内联样式？

  • 样式保留在您的 CSS 文件中，不会分散在 JavaScript 中。

  • 更易于维护和调试。

  • 与 CSS 动画和过渡配合良好。

使用内联样式.style

有时，您需要一次性或动态样式，例如根据用户输入设置宽度。在这种情况下，请使用style属性。

card.style.backgroundColor = 'blue';
card.style.padding = '16px';card.style.opacity = '0.8';

或者一次应用多个：

card.style.cssText = 'color: white; background-color: navy; padding: 12px;';

提示：请谨慎使用内联样式。它们会覆盖 CSS 规则，使样式更难管理。

使用 JavaScript 更新 CSS 变量

CSS 自定义属性（变量）为您提供了一种管理主题或配色方案的强大方法。

CSS源代码：

:root {
  --bg: #ffffff;
  --text: #111111;
}
body {
  background: var(--bg);
  color: var(--text);
}

JavaScript源代码：

document.documentElement.style.setProperty('--bg', '#111111');
document.documentElement.style.setProperty('--text', '#eeeeee');

这会改变使用这些变量的所有地方的外观，非常适合主题切换。

整合所有内容（主题切换示例）

这是一个使用 CSS 变量的完整示例classList，用于简洁、适合初学者的主题切换器。

HTML源代码：

Switch to Dark
Welcome to my page!

CSS源代码：

:root {
  --bg: #ffffff;
  --text: #111111;
}
body {
  background: var(--bg);
  color: var(--text);
  transition: background 0.3s, color 0.3s;
}
.dark {
  --bg: #111111;
  --text: #eeeeee;
}

JavaScript源代码：

const btn = document.getElementById('toggleBtn');
btn.addEventListener('click', () => {
  document.documentElement.classList.toggle('dark');
  const darkMode = document.documentElement.classList.contains('dark');
  btn.setAttribute('aria-pressed', String(darkMode));
  btn.textContent = darkMode ? 'Switch to Light' : 'Switch to Dark';
});

这个简单的脚本：

初学者的最佳实践

结论

使用 JavaScript 更改样式和类是让网站充满活力的第一步。您已经学习了如何选择元素、使用classList简洁的类管理、在需要时应用内联样式，甚至更新 CSS    变量以控制主题。

练习时，请专注于将样式保留在 CSS 中，并使用 JavaScript    触发样式。这种方法可以让您的项目更易于维护、更易于访问，并且更加专业。掌握这些技能后，您就可以开始构建能够完美响应用户操作的交互式动态页面了。

相关文章

JavaScript DOM：选择 HTML 元素

2025-10-21

女神异闻录夜幕魅影1.4版本玩法活动内容前瞻攻略

2025-10-21

JavaScript DOM 操作：如何动态更改网站内容

2025-10-21

Spring Boot 使用技巧与最佳实践

2025-10-21

推荐阅读

Java线程池快速入门

2025-10-21

SpringMVC 使用技巧与最佳实践

2025-10-21

Spring 框架使用技巧与最佳实践

2025-10-21

Java 使用技巧与最佳实践

2025-10-21