使用 JavaScript 修改 HTML 元素的 Class 属性-html教程-PHP中文网

使用 JavaScript 修改 HTML 元素的 Class 属性

花韻仙語

发布： 2025-10-25 10:10:01

原创

911人浏览过

使用 javascript 修改 html 元素的 class 属性

本文介绍了如何使用 JavaScript 修改 HTML 元素的 `class` 属性。重点讲解了如何通过 `querySelectorAll` 选取多个符合条件的元素，并使用循环来修改它们的 `className` 属性，从而实现批量修改 class 的功能。同时，展示了具体的代码示例和注意事项，帮助开发者更好地理解和应用该技术。

在 Web 开发中，经常需要使用 JavaScript 来动态修改 HTML 元素的属性，其中修改 class 属性是一个常见的需求。本文将详细介绍如何使用 JavaScript 修改元素的 class 属性，并提供一些实用的技巧和注意事项。

使用 querySelectorAll 和循环修改 Class

当需要修改多个具有相同 class 属性的元素时，querySelectorAll 方法结合循环是一种高效且常用的方法。querySelectorAll 可以选取所有匹配指定 CSS 选择器的元素，返回一个 NodeList 集合。

以下是一个示例，演示如何将所有同时拥有 dropdown-item 和 active 类的按钮元素的 class 属性修改为 dropdown-item：

立即学习“Java免费学习笔记（深入）”；

document.querySelectorAll(".dropdown-item.active").forEach(button => button.className = "dropdown-item");

登录后复制

代码解释：

图改改

在线修改图片文字

455

查看详情

document.querySelectorAll(".dropdown-item.active"): 使用 CSS 选择器 .dropdown-item.active 选取所有 class 属性同时包含 dropdown-item 和 active 的元素。
.forEach(button => ...): 对选取的 NodeList 集合进行循环，button 代表当前循环到的元素。
button.className = "dropdown-item": 将当前元素的 className 属性设置为 "dropdown-item"，从而修改元素的 class 属性。

示例 HTML：

<select name="client" class="select form-select" id="id_client" style="display : none "> 
    <option value="1109">Charles</option> 
    <option value="1108">Fred</option> 
    <option value="1107">Lionel</option> 
    <option value="1106">Robert</option> 
    <option value="1105">Mike</option>
</select>
<div class="dropdown dselect-wrapper select">
    <button class="form-select " data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Charles
    </button>
    <div class="dropdown-menu">
      <div class="d-flex flex-column">
        <input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, 'dselect-wrapper', 'form-select', false)" type="text" class="form-control" placeholder="Search" autofocus="">
        <div class="dselect-items" style="max-height:360px;overflow:auto">
          <button class="dropdown-item active" data-dselect-value="1109" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button>
          <button class="dropdown-item" data-dselect-value="1108" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Fred</button>
          <button class="dropdown-item" data-dselect-value="1107" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Lionel</button>
          <button class="dropdown-item" data-dselect-value="1106" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Robert</button>
          <button class="dropdown-item" data-dselect-value="1105" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Mike</button>
        </div>
        <div class="dselect-no-results d-none">No results found</div>
      </div>
    </div>
  </div>

登录后复制

CSS 样式 (可选):

.dropdown-item.active {
  background-color: red;
  color: white;
}

登录后复制

注意事项

选择器的准确性： 确保 CSS 选择器能够准确地选取到需要修改的元素，避免误操作。
性能考虑： 当需要修改大量元素的 class 属性时，循环操作可能会影响性能。可以考虑使用更高效的方法，例如使用框架或库提供的 API。
兼容性： querySelectorAll 方法在现代浏览器中得到广泛支持，但在旧版本浏览器中可能存在兼容性问题。可以使用 polyfill 来解决兼容性问题。
替代方案： 除了直接修改 className 属性，还可以使用 classList API 来添加、删除或切换 class 属性，例如 element.classList.add('new-class') 或 element.classList.remove('old-class')。classList API 提供了更便捷和安全的 class 操作方式。