如何在javascript中動態替換類名

Question

我想動態更改一個類，並在其末尾添加一個計數器。 我寫了這段代碼，但是它像字符串一樣對待。

這是代碼：

var divClass = document.getElementById('div2');
var i = 1;
setInterval(function () {
  divClass.className=divClass.className.replace('color','color'+ i);
  i++;
},5000);

我該如何解決這個問題？

Answer 1

我認為問題在於，在第一個循環之后，類名將為color1而您僅替換了“ color”部分，因此最終得到color12您可以設置className，因為它會覆蓋前一個

divClass.className = 'color'+ i;

如果您在存儲類之前先有類，那么先存儲它們，這樣就不會覆蓋它們： var classes = divClass.className; 並將它們設置為divClass.className = classes + ', color'+ i;

Answer 2

您可以像這樣使用JavaScript中的classList功能：

var divClass = document.getElementById('div2');
var i = 1;
setInterval(function () {
    divClass.classList.remove('color' + (i - 1));
    divClass.classList.add('color' + i++);
}, 5000);

您的數字很有可能會被視為字符串，因為您正在與字符串連接。 通過將項目放在括號中，它們將被執行為數字（因為括號中的任何內容都將首先運行），然后被連接為字符串。

Answer 3

改用：

element.className = 'other const clases' + 'color'+ i;

您必須更改類的完整字符串，或使用例如regex分兩步進行更改，然后再次進行分配。