gpt4 book ai didi

javascript - 使用 element.classList 检查是否在 html 元素中添加或删除了一个类

转载 作者:太空宇宙 更新时间:2023-11-04 13:13:23 25 4
gpt4 key购买 nike

我有一个代码可以在鼠标悬停或鼠标移出时改变元素无序列表的颜色。

(鼠标悬停时颜色变为浅绿色,鼠标移出时颜色变为浅灰色)

jsfiddle here

这里我使用 element.classList 方法根据鼠标事件从每个列表项中添加或删除 id。

我在这里随机添加或删除类。但我想通过检查是否存在以前添加的类来删除或添加。javascript 中是否有任何方法来检查添加的类是否存在?

<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>

最佳答案

如果你只是想看看一个元素是否有一个特定的类,你可以使用这样的函数:

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;
}

关于javascript - 使用 element.classList 检查是否在 html 元素中添加或删除了一个类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24544408/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com