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

【问题标题】：Add a class in all the elements of selector get by class in angular2在 angular2 中按类获取选择器的所有元素中添加一个类
【发布时间】：2018-01-21 07:13:07
【问题描述】：

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

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

上面的代码不工作。

【问题讨论】：

标签： angular class angular2-template elementref

【解决方案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, "");
}

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

【讨论】：

“NodeListOf”类型上不存在属性“classList”。 - 当我使用类列表时出现此错误
在 Angular 中使用直接文档不是一个好习惯，例如：document.getElementById("myDIV")
document.querySelectorAll('.option-btn');返回一个数组，您需要对该数组进行迭代才能使用 classList。 @AMitSiNgh
请提及如何迭代和使用类列表。 @gurmeet
[].forEach.call(allbtn,function(key,value){ key.classList.remove("cm-grey"); });