<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <style> #div1{color:red; font-size:30px;} .active{ background:black;} </style> <body> <div id="div1" class="actived" onClick="highlight(this)">123456789</div> <script type="text/javascript"> function highlight(e){ var str=e.className; var re=/active/; if(re.test(str)==true){ e.className=str; }else{ e.className+=" active"; } } </script> </body> </html>
这是一个点击添加class改变样式的函数,当被点击的标签为空时会添加active,而当它已经含有时就不需要继续添加,现在是当它class为actived时也被认为是有active,这个问题该怎么解决?
/^active$/ 只匹配active
但是你为什么不适用classList呢?自带has,add,remove,contain方法
你这个元素的class如果写的比较规范的话,那么active后面跟的应该是行尾,你把re改一下,
re = /active(?!d)/?!n :匹配任何其后没有紧接指定字符串 n 的字符串。