Question

我正在尝试使用JavaScript添加/删除一个类。（请不要发布关于JQuery的内容，因为那是无关紧要的。）我遇到this answer，建议使用正则表达式删除该类。这是代码：

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

我将添加和删除相同的类。问题是，我多次这样做，就是有多少空格被添加到类名中。例如，如果我添加和删除类5次，则两个类名之间将有5个空格。

如何阻止空间进入？

CodePen

代码段

var myDiv = document.getElementById('myDiv'),
  par = document.getElementById('par');

myDiv.addEventListener('click', function() {
  if (hasClass(myDiv, 'tryThis')) {
    removeClass(myDiv, 'tryThis');
  } else {
    addClass(myDiv, 'tryThis');
  }
  console.log(myDiv.className);
});



function hasClass(ele, cls) {
  return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
  if (!hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {
    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
    ele.className = ele.className.replace(reg, ' ');
  }
}

#myDiv {
  width: 100px;
  height: 100px;
  background-color: green;
}
.tryThis {
  border: 2px solid orange;
}

<div id="myDiv" class="hello">Click Me</div>
<p id="par"></p>

Answer 1

有两个解决方案。第一个（也是最简单的）是使用classList。此解决方案唯一的缺点是您无法继续支持早于其实施的浏览器。

至于第二个解决方案，它保留了对旧浏览器的支持并延伸了你的正则表达式解决方案，我建议将一个函数传递给replace，检查类名的两边是否都是空格。如果是，请返回' '，否则返回''。

function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {
    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
    ele.className = ele.className.replace(reg, function(match) {
      if (match.match(/^\s.+\s$/) !== null) {
        return ' ';
      } else {
        return '';
      }
    });
  }
}

编辑：还可以选择使用垫片，假，shiv，polyfill等。

Answer 2

看起来如果你将修饰添加到它正在使用的替换语句，所以将其更改为：ele.className = ele.className.replace(reg, ' ').trim();虽然trim()在IE8中不起作用，所以如果这是一个问题，这不是'一个满意的解决方案。希望这会有所帮助。

最佳！

Answer 3

为什么不使用classList：

var ele = document.getElementByID("myDiv");
if(ele.classList.contains("tryThis")){
  ele.classList.remove("tryThis");
}else{
  ele.classList.add("tryThis");
}

参考：http://callmenick.com/post/add-remove-classes-with-javascript-property-classlist

Answer 4

正则表达式很危险！*

（*哈，我只是在开玩笑！）

如果您正在寻找一个超级天真且效率低下解决此问题的方法，那么这就是我想出来的。我基本上通过对字符串和数组（.indexOf，.split，.join等）使用多种方法来替换函数内部正在发生的事情。

显然，这是次优的，因为时间复杂度将是线性的（至少我认为它是线性的，因为我们在数组上迭代了很多次）。

function hasClass(ele, cls) {
   // Check that our string contains the class name.
   return (ele.className.indexOf(cls) >= 0);
}

function addClass(ele, cls) {
  if (!hasClass(ele, cls)) {
    var classArray = ele.className.split(' ');
    classArray.push(cls);
    ele.className = classArray.join(' ');
  }
}

function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {
    var classArray = ele.className.split(' ');
    var classLocation = classArray.indexOf(cls);
    classArray.splice(classLocation,1);
    ele.className = classArray.join(' ')
  }
}

使用JavaScript删除ClassClass

CodePen

代码段

4 个答案: