检查使用element.classList从html元素中添加或删除的类
检查使用element.classList从html元素中添加或删除的类
提问于 2014-07-03 03:26:02
我有一个代码，将改变颜色的无序列表上的项目鼠标或鼠标。
(鼠标结束时将颜色改为浅绿色，鼠标上为浅灰)
小提琴手
在这里，我使用element.classList mehtod根据鼠标事件从每个列表项中添加或删除id。
在这里，我要删除或删除类randomly.but，方法是检查以前添加的类是否存在。中有任何方法检查添加的类是否存在？？。
<html>
<head>
<style>
li {
background:lightgray;
list-style-type:none;
font-family:Ariel;
color:white;
height:30px;
width:150px;
font-size:20px;
font-weight:bold;
padding:5px;
margin:2px;
}
li.element {
background:lightgreen;
}
li.back {
background:lightgray;
}
</style>
</head>
<body>
<ul id="uls">
<li>apple</li>
<li>orange</li>
<li>pineapple</li>
<li>mange</li>
</ul>
<script>
function makeit() {
var elem = document.getElementById('uls');
elem.addEventListener('mouseover', function(e) {
var target = e.target;
if (target.tagName == "LI") {
target.classList.remove('back');
target.classList.toggle('element');
}
}, false);
elem.addEventListener('mouseout', function(e) {
var target = e.target;
if (target.tagName == "LI") {
target.classList.remove('element');
target.classList.toggle('back');
}
}, false);
}
window.onload = makeit;
</script>
</body>
</html>Stack Overflow用户
回答已采纳
发布于 2014-07-03 03:36:10
如果您只想查看元素是否具有特定的类，则可以使用以下函数：
function hasClass(element, className) {
var re = new RegExp('(^|\\s)' + className + '(\\s|$)');
return re.test(element.className);
}或
function hasClass(element, className) {
return (' ' + element.className + ' ').indexOf(' ' + className + ' ') >= 0;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24544408
复制相关文章
相似问题
腾讯云开发者
