Question

我有一个代码，可以在鼠标悬停或鼠标移动时更改无序的项目列表的颜色。

（鼠标悬停时颜色变为浅绿色，鼠标悬停时变为浅灰色）

这里我使用了element.classList mehtod来添加或删除每个列表项中的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>

Answer 1

如果您只想查看元素是否具有特定类，则可以使用如下函数：

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

Answer 2

您可以使用element.className的正则表达式匹配，也可以使用jQuery自己的实现： hasClass

来自jQuery源代码（2.0.3）

function (selector) {
    var className = " " + selector + " ",
        i = 0,
        l = this.length;
    for (; i < l; i++) {
        if (this[i].nodeType === 1 && (" " + this[i].className + " ").replace(/[\n\t\r]/g, " ").indexOf(className) >= 0) {
            return true;
        }
    }

    return false;
}

如需更多阅读，您可以前往jQuery source viewer of或窥视其source at github。

检查是否使用element.classList从html元素添加或删除了类

2 个答案: