Question

我通过下面的代码得到一个元素引用，我想添加一个类，并从我得到的所有元素中删除一个类。

app.component.html

<ul>
   <li class="option-btn cm-grey" />option 1</li>
   <li class="option-btn cm-grey" />option 1</li>
   <li class="option-btn cm-grey" />option 1</li>
</ul>

app.component.ts

var allbtn = document.querySelectorAll('.option-btn');
allbtn.removeClass('cm-grey');
allbtn.addClass('cm-blue');

以上代码无效。

Answer 1

请使用班级列表

allbtn.classList.add("mystyle");

注意：Internet Explorer 9不支持classList属性。以下代码适用于所有浏览器：

function myFunction() {
    var element, name, arr;
    element = document.getElementById("myDIV");
    name = "mystyle";
    arr = element.className.split(" ");
    if (arr.indexOf(name) == -1) {
        element.className += " " + name;
    }
}

类似地

allbtn.classList.remove("mystyle");

跨浏览器解决方案

function myFunction() {
    var element = document.getElementById("myDIV");
    element.className = element.className.replace(/\bmystyle\b/g, "");
}

如果您希望获得跨浏览器支持（我鼓励）并使这些函数可重用，您可以进一步将类名称作为参数传递给这些函数。

在angular2中按类添加选择器的所有元素中的类

1 个答案: