本文档将详细介绍如何使用 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 属性值的元素。
- 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="tuc-4a829adf-22adbe-0 dropdown-menu tuc-4a829adf-22adbe-0"> <div class="tuc-4a829adf-22adbe-0 d-flex flex-column tuc-4a829adf-22adbe-0"> <input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, 'dselect-wrapper', 'form-select', false)" type="text" class="tuc-4a829adf-22adbe-0 form-control tuc-4a829adf-22adbe-0" placeholder="Search" autofocus=""> <div class="tuc-4a829adf-22adbe-0 dselect-items tuc-4a829adf-22adbe-0" style="max-height:360px;overflow:auto"> <button class="tuc-4a829adf-22adbe-0 dropdown-item active tuc-4a829adf-22adbe-0" data-dselect-value="1109" type="button" onclick="selectClient(this.id)" id="client-1109">Charles</button> <button class="tuc-4a829adf-22adbe-0 dropdown-item tuc-4a829adf-22adbe-0" data-dselect-value="1108" type="button" onclick="selectClient(this.id)" id="client-1108">Fred</button> <button class="tuc-4a829adf-22adbe-0 dropdown-item tuc-4a829adf-22adbe-0" data-dselect-value="1107" type="button" onclick="selectClient(this.id)" id="client-1107">Lionel</button> <button class="tuc-4a829adf-22adbe-0 dropdown-item tuc-4a829adf-22adbe-0" data-dselect-value="1106" type="button" onclick="selectClient(this.id)" id="client-1106">Robert</button> <button class="tuc-4a829adf-22adbe-0 dropdown-item tuc-4a829adf-22adbe-0" data-dselect-value="1105" type="button" onclick="selectClient(this.id)" id="client-1105">Mike</button> </div> <div class="tuc-4a829adf-22adbe-0 dselect-no-results d-none tuc-4a829adf-22adbe-0">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() 方法，可以轻松实现根据用户交互行为，动态改变页面元素样式的效果。在实际开发中，可以根据具体需求，灵活运用这些方法，实现更加丰富的用户体验。