本文档将详细介绍如何使用 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 代码：
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() 方法，可以轻松实现根据用户交互行为，动态改变页面元素样式的效果。在实际开发中，可以根据具体需求，灵活运用这些方法，实现更加丰富的用户体验。
