在angular2中通过class获取的selector的所有元素中添加一个class

Question

我正在通过以下代码获取元素引用，我想添加一个 class 并从我获取的所有元素中删除一个 class。

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

请使用class列表

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

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

在angular2中通过class获取的selector的所有元素中添加一个class

Add a class in all the elements of selector get by class in angular2

class

angular2-template

angular

elementref