angular - 在angular2中按类获取的选择器的所有元素中添加一个类

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

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