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

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

花韻仙語

发布： 2025-10-26 08:08:18

原创

608人浏览过

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

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

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

核心思路

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

详细步骤

假设我们有如下 HTML 结构：

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

<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 值，找到 data-dselect-value 属性值与之匹配的 dropdown-item 元素，并将其类名修改为 dropdown-item active。

以下是 JavaScript 代码：

图改改

在线修改图片文字

455

查看详情

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 类名，实现取消选中效果。

完整示例

<!DOCTYPE html>
<html>
<head>
<title>修改类名示例</title>
<style>
  .dropdown-item {
    padding: 5px 10px;
    cursor: pointer;
  }
  .dropdown-item.active {
    background-color: #007bff;
    color: white;
  }
</style>
</head>
<body>

<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="selectClient(this.id)" id="client-1109">Charles</button>
      <button class="dropdown-item" data-dselect-value="1108" type="button" onclick="selectClient(this.id)" id="client-1108">Fred</button>
      <button class="dropdown-item" data-dselect-value="1107" type="button" onclick="selectClient(this.id)" id="client-1107">Lionel</button>
      <button class="dropdown-item" data-dselect-value="1106" type="button" onclick="selectClient(this.id)" id="client-1106">Robert</button>
      <button class="dropdown-item" data-dselect-value="1105" type="button" onclick="selectClient(this.id)" id="client-1105">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>

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

function selectClient(clientId){
  //Remove active class from all dropdown items
  document.querySelectorAll('.dropdown-item').forEach(item => item.classList.remove('active'));
  //Add active class to the selected item
  document.querySelector('[data-dselect-value="'+clientId.split('-')[1]+'"]').classList.add('active');
}
</script>

</body>
</html>

登录后复制

总结

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

以上就是使用 JavaScript 根据属性值查找元素并修改其类名的详细内容，更多请关注php中文网其它相关文章！