querySelectorAll点击获取当前元素改变其属性

最新推荐文章于 2025-05-16 15:18:00 发布

yuyu_2019

最新推荐文章于 2025-05-16 15:18:00 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/yuyu_2019/article/details/117067950

JS 专栏收录该内容

21 篇文章

订阅专栏

本文通过一个具体示例介绍了如何使用JavaScript进行DOM操作，包括获取元素、添加点击事件、切换样式等，帮助读者理解如何动态地修改网页内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法	描述
querySelector	获取某一元素
querySelectorAll	获取所有元素
e.currentTarget	获取当前对象的HTML标签
getAttribute	获取当前元素属性
setAttribute	设置当前元素属性
classList.add	添加class
classList.remove	移除class

var path = d.querySelectorAll('path')

for (var i = 0; i < path.length; i++) { // 循环给querySelectorAll所有元素加上点击事件
  path[i].addEventListener('click', function (e) {
    let current = e.currentTarget // 获取当前对象的html标签

    let className = current.getAttribute('class') // 获取当前html标签的class属性

    if (className === 'chosed') {
      current.classList.remove("chosed")
      current.setAttribute('style', '')
    } else {
      current.classList.add("chosed")
      current.setAttribute('style', 'stroke: #666; stroke-dasharray: 4; stroke-width: 1')
    }

  })
}