javascript - 使用 getelementbyclass 删除属性

Question

这个问题已经有答案了:

What do querySelectorAll and getElementsBy* methods return? (12 个回答)

已关闭 6 年前。

这里我尝试调用类并获取变量中的值以删除其属性style并再次设置style，但它显示这样的错误

Uncaught TypeError: cls.removeAttribute is not a function.

cls = document.getElementsByClassName("ps-scrollbar-x-rail");
cls1 = document.getElementsByClassName("ps-scrollbar-x");
cls2 = document.getElementsByClassName("ps-scrollbar-y-rail");
//alert(cls);
//alert(cls1);
//alert(cls2);
//console.log(cls);
//console.log(cls1);
//console.log(cls2);

cls.removeAttribute("style"); 
cls1.removeAttribute("style");
cls2.removeAttribute("style");

cls.setAttribute("style","width: 600px; left: 258px; bottom: 1px;"); 
cls1.setAttribute("style","left: 143px; width: 333px;");
cls2.setAttribute("style","top: 0px; right: -255px;");

Onclick调用此方法。显示错误。

Answer 1

getElementsByClassName 将返回一个类似数组的对象 - NodeList 。您需要对该对象的每个项目调用removeAttribute。您可以使用简单的 for 循环或 foreach()

对其进行迭代

for(var i = 0; i < cls.length; i++){
   cls[i].removeAttribute("style"); 
}

示例

与对于

var cls = document.getElementsByClassName('text');

for(var i = 0; i < cls.length; i++) {
   cls[i].removeAttribute('style');
}

<p style="color: red" class="text">Test</p>
<p style="color: red" class="text">Test</p>
<p style="color: red" class="text">Test</p>
<p style="color: red" class="text">Test</p>

与ForEach

var cls = document.getElementsByClassName('text');

Array.prototype.forEach.call(cls, (item) => item.removeAttribute('style'));

<p style="color: red" class="text">Test</p>
<p style="color: red" class="text">Test</p>
<p style="color: red" class="text">Test</p>
<p style="color: red" class="text">Test</p>