JavaScript：根据属性值查找元素并修改其类名-html教程-PHP中文网

JavaScript：根据属性值查找元素并修改其类名

DDD

发布： 2025-11-03 11:59:01

原创

617人浏览过

javascript：根据属性值查找元素并修改其类名

本文档将介绍如何使用 JavaScript 查找具有特定属性值的 HTML 元素，并动态地修改其 CSS 类名。我们将通过一个实际示例，演示如何根据按钮点击事件传递的 ID 值，查找具有相应 `data-dselect-value` 属性的元素，并为其添加 `active` 类。

使用 document.querySelector 查找元素

JavaScript 提供了多种方法来查找 HTML 元素，其中 document.querySelector 方法是最灵活和常用的方法之一。它允许我们使用 CSS 选择器来查找元素。

在我们的示例中，我们需要查找 data-dselect-value 属性值等于按钮点击事件传递的 ID 值的元素。我们可以使用属性选择器 [attribute="value"] 来实现。

以下是实现该功能的 JavaScript 代码：

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

图改改

在线修改图片文字

455

查看详情

function myFunc(clicked_id){
    var elem = document.querySelector('[data-dselect-value="'+clicked_id+'"]');
    elem.classList.add('active');   
};

登录后复制

代码解释：

function myFunc(clicked_id){ ... }: 定义一个名为 myFunc 的函数，该函数接受一个参数 clicked_id，该参数表示被点击按钮的 ID 值。
document.querySelector('[data-dselect-value="'+clicked_id+'"]'): 使用 document.querySelector 方法查找具有 data-dselect-value 属性且其值等于 clicked_id 的元素。 [data-dselect-value="'+clicked_id+'"] 是一个 CSS 属性选择器，它选择具有指定属性和值的元素。
elem.classList.add('active'): 如果找到匹配的元素，则使用 classList.add('active') 方法将 active 类添加到该元素的类列表中。

HTML 示例

为了更好地理解上述代码，我们提供一个 HTML 示例：

<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>

<button onclick="myFunc(this.id)"  id="1106">Select client</button>

登录后复制

在这个例子中，当点击 ID 为 "1106" 的按钮时，myFunc 函数会被调用，并将 "1106" 作为 clicked_id 传递给函数。 document.querySelector 将查找 data-dselect-value 属性值为 "1106" 的按钮元素，并为其添加 active 类。

注意事项

确保 clicked_id 的值与 HTML 元素中的 data-dselect-value 属性值完全匹配。
如果页面上有多个具有相同 data-dselect-value 属性值的元素，document.querySelector 只会返回第一个匹配的元素。如果需要选择所有匹配的元素，可以使用 document.querySelectorAll。
classList.add() 方法用于添加类名。如果需要删除类名，可以使用 classList.remove() 方法。如果需要切换类名，可以使用 classList.toggle() 方法。