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

本文档将详细介绍如何使用 javascript 查找具有特定属性值的 html 元素，并动态修改其 css 类名。我们将通过一个实际示例，演示如何根据按钮点击事件获取的 id 值，在下拉菜单中找到对应的 `dropdown-item` 元素，并将其类名更改为 `dropdown-item active`，从而实现选中效果。

在 Web 开发中，经常需要根据用户的交互行为，动态地修改 HTML 元素的样式。其中一种常见的场景是，根据用户的选择，高亮显示列表中的某个选项。本文将介绍如何使用 JavaScript 实现这一功能。

核心思路

1. 获取目标元素： 使用 document.querySelector() 方法，根据属性选择器找到具有特定 data-dselect-value 属性值的元素。
2. 修改类名： 使用 classList.add() 方法，为目标元素添加 active 类名。

详细步骤

假设我们有如下 HTML 结构：

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

  

    
    

      Charles
      Fred
      Lionel
      Robert
      Mike
    
    
No results found
  


Select client

我们的目标是，当点击某个按钮时，根据按钮的 id 值，找到 data-dselect-value 属性值与之匹配的 dropdown-item 元素，并将其类名修改为 dropdown-item active。

以下是 JavaScript 代码：

koly.club

一站式社群管理工具

下载

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

代码解释

• myFunc(clicked_id): 这是一个函数，它接受一个参数 clicked_id，该参数表示被点击按钮的 id 值。
• document.querySelector('[data-dselect-value="'+clicked_id+'"]'): 这行代码使用 document.querySelector() 方法来查找具有特定 data-dselect-value 属性值的元素。
  • [data-dselect-value="'+clicked_id+'"]: 这是一个属性选择器，它选择 data-dselect-value 属性值等于 clicked_id 的元素。
• elem.classList.add('active'): 这行代码使用 classList.add() 方法，为找到的元素 elem 添加 active 类名。

注意事项

• 确保 clicked_id 的值与 data-dselect-value 属性值的数据类型一致（例如，都是字符串）。
• 如果页面上有多个具有相同 data-dselect-value 属性值的元素，document.querySelector() 方法只会返回第一个匹配的元素。如果需要选择所有匹配的元素，可以使用 document.querySelectorAll() 方法。
• 可以根据实际需求，使用 classList.remove('active') 方法移除 active 类名，实现取消选中效果。

完整示例

  

    
    

      Charles
      Fred
      Lionel
      Robert
      Mike
    
    
No results found
  


Select client

总结

本文介绍了如何使用 JavaScript 查找具有特定属性值的 HTML 元素，并动态修改其 CSS 类名。通过 document.querySelector() 方法和 classList.add() 方法，可以轻松实现根据用户交互行为，动态改变页面元素样式的效果。在实际开发中，可以根据具体需求，灵活运用这些方法，实现更加丰富的用户体验。