js动态给dom元素添加类名

青旅半醒 2022-09-07 09:38 340阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
    </head>
    <body>
        <ul id="ulRef">
            <li class="test1 test2"><span>我是标题我是标题我是</span></li>
            <li class="test1 test2"><span>我是标题</span></li>
            <li class="test1 test2"><span>我是标题</span></li>
            <li class="test1 test2"><span>我是标题</span></li>
            <li class="test1 test2"><span>我是标题</span></li>
        </ul>
        <script>
             function addClass(el,className){
                    if(hasClass(el,className)){
                        return
                    }
                    let newClass=el.className.split(' ')
                    newClass.push(className)             
                    el.className= newClass.join(' ')
    
    
                }
            function hasClass(el,className){
                let reg=new RegExp(`(^|\\s)${className}(\\s|$)`)
                return reg.test(el.className)
            }
    
            let lis=document.getElementById('ulRef').children
            for(el of lis){
                addClass(el,'test3')
            }
            
        </script>
        
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，340人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery怎样给元素添加类class 怎样移除元素的类名 class呢

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...

待我称王封你为后i/ 2024年04月18日 10:06/ 0 赞/ 96 阅读

相关通过原生js动态给元素添加选择器

添加：节点.classList.add("类名")；例如： li.classList.add('active');

今天药忘吃喽~/ 2023年08月17日 17:50/ 0 赞/ 110 阅读

相关 vue给dom元素添加key让它不复用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

灰太狼/ 2023年07月08日 11:28/ 0 赞/ 11 阅读

相关原生js给元素添加事件

<body> <button id="bb"></button> <div id="a1"></div> </body>

电玩女神/ 2023年05月29日 11:38/ 0 赞/ 35 阅读

相关 JavaScript经典案例：添加/删除元素类名

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

客官°小女子只卖身不卖艺/ 2022年12月24日 10:59/ 0 赞/ 170 阅读

相关 js动态给dom元素添加类名

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

青旅半醒/ 2022年09月07日 09:38/ 0 赞/ 341 阅读

相关 Vue - 动态添加移除 DOM元素（输入框示例）

效果图 > 该示例代码简洁干净，可直接复制运行查看效果。 `Vue` 动态添加移除 `DOM` 元素，基于此示例可拓展为自身业务逻辑。 ![在这里插入图片描述][f

墨蓝/ 2022年09月02日 00:45/ 0 赞/ 512 阅读

相关 angualrjs动态添加类名动态改变css

实现目标： 1.点击收藏商品，先判断是否登录，没有登录跳转到登录页面 2.登录的话，把a跳转隐藏，切换背景图片实现收藏路由：

ゝ一世哀愁。/ 2022年06月04日 06:16/ 0 赞/ 231 阅读

相关原生JS给元素添加类移除类

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na

末蓝、/ 2022年05月17日 03:58/ 0 赞/ 266 阅读

相关使用TypeDescriptor给类动态添加Attribute

原文出处：[www.cnblogs.com/bicker/p/3326763.html][www.cnblogs.com_bicker_p_3326763.html] 给类动

àì夳堔傛蜴生んèń/ 2022年02月18日 21:19/ 0 赞/ 237 阅读