Question

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

未捕获的TypeError：cls.removeAttribute不是函数。

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将返回array like object - NodeList。您需要在该对象的每个项目上调用removeAttribute。您可以使用简单的for循环或foreach()

对其进行迭代

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

<强>实施例

For

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用 ForEach

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

JavaScript将元素作为数组获取。你需要使用

cls[0].removeAttribute("style"); 
cls1[0].removeAttribute("style");
cls2[0].removeAttribute("style");

Answer 3

鉴于applesToOrder = applesTheyNeed - applesTheyHave; orangesToOrder = orangesTheyNeed - orangesTheyHave;返回一个实时NodeList，你必须迭代该NodeList中的每个元素，以便依次从每个Node中删除该属性。

但是考虑到你正在寻找三个单独类的元素，使用getElementsByClass()更有意义，它允许多个选择器，然后遍历返回的每个元素（非实时）节点列表：

document.querySelectorAll()

参考文献：

使用getelementbyclass删除属性

3 个答案: