使用 JavaScript 從 HTML 元素中刪除 class

Question

我正在嘗試使用 JavaScript 從 html 標簽中刪除 class 但我不知道從哪里開始。 我已經搜索但無濟於事。 雖然我在 jQuery 中相當流利，但我不在 JavaScript 中，我需要在這種情況下使用 JavaScript 到目前為止我發現自己使用的任何東西都不需要調整。 希望有人能以一種萬無一失的方式解釋它。

class 附加到的元素是“ul”標簽。 class 被命名為“nojavaScript”並且只應用於“ul”標簽的這個單一實例。 正如我所說，class 在頁面中只使用一次，“ul”標簽用於具有不同類或 id 的其他實例。 如果它能讓 JavaScript 更容易，我可以將 class 更改為 id。

我希望我已經給你足夠的go了。 我將在下面包含 html 代碼的示例。

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

正如我提到的，如果刪除 id 比刪除 class 更容易，我可以將當前 id 設為 class，並將當前 class 設為 id。 但本質上是需要刪除的“nojavaScript”。

謝謝！

Answer 1

嘗試這個：

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

Answer 2

這是一個純js解決方案：

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

首先你 select 具有給定 class 名稱的所有元素，然后迭代結果並用空字符串替換className屬性中給定的 class 。

更新：

這是一個更強大的解決方案，它將刪除轉換為參數化的 function 並處理從className屬性的開頭、結尾和中間剝離額外的空格。

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

這是一個現場演示->

Answer 3

function removeCSSClass(element, className) {
    var cssClass = ' ' + element.className + ' ';
    var index = cssClass.indexOf(' ' + className + ' ');
    if (index >= 0) {
        var newClass = cssClass.substr(0, index) + ' ' + cssClass.substr(index + className.length + 1);
        element.className = newClass;
    }
}

更新：代碼現在適用於所有場合

Answer 4

Class 名稱修改應該在className屬性上使用 RegExp 替換來完成，以避免破壞其他應該保留的 className：

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

http://jsfiddle.net/JAAulde/nWzaZ/3/

（通用 class 名稱： http://jsfiddle.net/JAAulde/nWzaZ/2/ ）

如果沒有這個正則表達式，您要么擦除整個類名，要么過度殺傷並可能刪除foonojavaScript的一部分（你知道，如果你有這樣一個奇怪的 class:P ）。 雖然這可能不太可能，但當您遇到可能不那么具體的代碼時，這是一個很好的做法。

此解決方案允許您在元素上擁有盡可能多的類，與您希望的相似，而不用擔心您如何格式化它們，而不是 W3C 指定的格式。 沒有維護問題:)。

（正則表達式專門查找您的 class 前面是字符串或空格的開頭，然后是空格或字符串的結尾）

（這假設您首先已經掌握了如何從 DOM 中獲取元素的方法。）

Answer 5

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');

Answer 6

這是一個考慮元素上多個類的非正則表達式方法。

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');

它在空格上拆分以隔離整個 class 名稱，而對 class 名稱字符串進行簡單搜索並用空替換可能會占用更長的 class 名稱的一部分。