本文档将详细介绍如何使用 javascript 查找具有特定属性值的 html 元素，并动态修改其 css 类名。我们将通过一个实际示例，演示如何根据按钮点击事件获取的 id 值，在下拉菜单中找到对应的 `dropdown-item` 元素，并将其类名更改为 `dropdown-item active`，从而实现选中效果。
在 Web 开发中，经常需要根据用户的交互行为，动态地修改 HTML 元素的样式。其中一种常见的场景是，根据用户的选择，高亮显示列表中的某个选项。本文将介绍如何使用 JavaScript 实现这一功能。
核心思路
获取目标元素： 使用 document.querySelector() 方法，根据属性选择器找到具有特定 data-dselect-value 属性值的元素。修改类名： 使用 classList.add() 方法，为目标元素添加 active 类名。
详细步骤
假设我们有如下 HTML 结构：
立即学习“Java免费学习笔记（深入）”；
我们的目标是，当点击某个按钮时，根据按钮的 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 类名，实现取消选中效果。
完整示例
修改类名示例 .dropdown-item { padding: 5px 10px; cursor: pointer; } .dropdown-item.active { background-color: #007bff; color: white; }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');}
总结
本文介绍了如何使用 JavaScript 查找具有特定属性值的 HTML 元素，并动态修改其 CSS 类名。通过 document.querySelector() 方法和 classList.add() 方法，可以轻松实现根据用户交互行为，动态改变页面元素样式的效果。在实际开发中，可以根据具体需求，灵活运用这些方法，实现更加丰富的用户体验。
以上就是使用 JavaScript 根据属性值查找元素并修改其类名的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1588757.html
微信扫一扫 
支付宝扫一扫 
