使用JavaScript删除HTML元素中的类

如何解决使用JavaScript删除HTML元素中的类

| 我正在尝试使用JavaScript从html标记中删除类，但是我不知道从哪里开始。我已经搜索了，但无济于事。虽然我精通jQuery，但我不是JavaScript，在这种情况下我需要使用JavaScript到目前为止，我发现的任何内容都需要针对自己的使用进行调整，但我还没有成功。希望有人可以以一种简单的方式来解释它。类附加到的元素是\“ ul \”标记。该类名为\“ nojavaScript \”，并且仅应用于\“ ul \”标记的单个实例。正如我所说的，该类仅在页面中使用一次，而\“ ul \”标记则用于具有不同类或ID的其他实例。如果可以简化JavaScript，可以将类更改为id。希望我给了您足够的继续。我将在下面提供一个 HTML代码示例。

<ul id=\"lines_list\" class=\"nojavaScript\"></ul>

如前所述，如果删除一个ID比一个类更容易，则可以将当前ID设为一个类，而将当前类设为一个ID。但实际上，它是需要删除的“ nojavaScript”。谢谢！

解决方法

函数removeCSSClass（element，className）{ var cssClass = \'\'+ element.className + \'\'; var index = cssClass.indexOf（\'\'+ className + \'\'）; 如果（索引> = 0）{ var newClass = cssClass.substr（0，index）+ \'\'+ cssClass.substr（index + className.length +1）; element.className = newClass; } } 更新：代码现在可以在所有场合使用 , 尝试这个：

document.getElementById(\"lines_list\").className = \"\";

, 这是一个纯js解决方案：

var ulArr = document.getElementsByClassName(\'nojavaScript\');
for (var i = 0; i < ulArr.length; i++) {
     ulArr[i].className = ulArr[i].className.replace(\'nojavaScript\',\'\');   
}

首先，选择具有给定类名称的所有元素，然后遍历结果并将“ 3”属性中的给定类替换为空字符串。更新：这是一个更强大的解决方案，它将删除内容转换为参数化函数，并处理从the3ѭ属性的开头，结尾和中间去除多余的空格。

function removeClass(elem,className) {
    //declare some regexes to help us strip the extra whitespace
    var trimLeft = /^\\s+/,trimRight = /\\s+$/,stripDouble = /\\s+/g;
    //remove the class,strip extra whitespace,and reassign className
    elem.className = elem.className.replace(className,\'\').replace(trimLeft,\'\').replace(trimRight,\'\').replace(stripDouble,\' \');
}

//declare name of class to remove and get an array of elements with that class
var toRemove = \'nojavaScript\',elArr = document.getElementsByClassName(toRemove);

//iterate over elements and remove the class
for (var i = 0; i < elArr.length; i++) {
    removeClass(elArr[i],toRemove);
}

这是一个现场演示-> ,

function removeClassFromElement(el,className){
    var classes = el.getAttribute(\'class\').split(/[ ]+/g);
    var class = \"\";
    for(var i in classes)
        if(classes[i] != className)
            class += classes[i] + \" \";
    el.setAttribute(\'class\',class);

}
removeClassFromElement(document.getElementById(\'lines_list\'),\'nojavaScript\');

, 这是一个非正则表达式方法，它考虑元素上的多个类。

function removeClass(element,cssClass) {

  var classes = element.className.split(\' \');

  var j = classes.length;
  while (j--) {
    if (classes[j] === cssClass) {
      classes.splice(j,1);
    }
  }

  element.className = classes.join(\' \');
}   

var lines_list = document.getElementById(\'lines_list\');
removeClass(lines_list,\'nojavaScript\');

它以空格分隔以隔离整个类名，而对类名字符串进行简单搜索并不进行任何替换可能会占用较长的类名的一部分。 , 应该使用RegExp替换对className属性进行类名修改，以避免破坏其他应保留的className：

var ele = document.getElementById( \'lines_list\' );
ele.className = ele.className.replace( /(?:^|\\s)nojavaScript(?:\\s|$)/gm,\' \' );

http://jsfiddle.net/JAAulde/nWzaZ/3/ （通用的类名：http://jsfiddle.net/JAAulde/nWzaZ/2/）如果不使用此正则表达式，则要么擦除整个className，要么矫kill过正，甚至可能取出foonojavaScript的一部分（您知道，如果您有这样一个奇怪的类：P）。尽管这确实不太可能，但是对于遇到不太具体的代码，这是一个好习惯。该解决方案使您可以根据需要在元素上具有尽可能多的类，与所需类类似，而不必担心如何格式化它们，而不是由W3C指定。没有维护问题：）。（RegExp专门在类的前面查找字符串开头或字符串，然后在空格或字符串结尾）（这首先假设您已经掌握了如何从DOM中获取元素的方法。）

使用JavaScript删除HTML元素中的类

如何解决使用JavaScript删除HTML元素中的类

解决方法

相关推荐