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

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

使用 document.querySelector 查找元素

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

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

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

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

Meituan CatPaw

美团推出的智能AI编程Agent

下载

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

代码解释：

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

HTML 示例

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

    

        
        

          Charles
          Fred
          Lionel
          Robert
          Mike
        
        
No results found
    


Select client

在这个例子中，当点击 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() 方法。

总结

本文介绍了如何使用 JavaScript 根据属性值查找 HTML 元素，并动态地修改其 CSS 类名。 document.querySelector 方法是一个强大的工具，可以帮助我们轻松地查找和操作 HTML 元素。 理解并掌握这些技术，可以帮助我们构建更加动态和交互性强的 Web 应用程序。