网络技术问题 | JavaScript 课程测验 1 |问题 23

在 JavaScript 代码中，有时候需要动态改变 HTML 元素的样式，这时可以借助 JavaScript 的 DOM API 来实现。但是，如果在代码中频繁操作 DOM 元素，会给网页的性能带来很大影响。

为了避免频繁操作 DOM 元素带来的性能问题，可以考虑使用 CSS 类来完成样式的修改，然后使用 JavaScript 来改变 HTML 元素的类名。

下面是一段示例代码，通过点击按钮来修改 HTML 元素的类名，从而切换样式。

// 获取按钮和需要修改样式的元素
const button = document.getElementById('toggle-button');
const targetElement = document.getElementById('target-element');

// 点击按钮时切换样式类
button.addEventListener('click', () => {
  targetElement.classList.toggle('active');
});

其中，classList 是 DOM 元素节点的一个属性，它提供了添加、删除和切换类的方法。toggle 方法用于在类列表中切换一个类名，如果该类名已经存在，则删除它；如果不存在，则添加它。

以上介绍的是利用 CSS 类来动态修改 HTML 元素样式的方法，可以有效避免频繁操作 DOM元素导致的性能问题。