javascript setattribute到多个元素

Mat*_*euB 10 javascript setattribute

我有很多div与publish_0我想要改变的类publish_1点击一个按钮.

现在我使用它但它只改变一个项目.

如何将setattribute应用于具有该属性的所有项目publish_0.

document.querySelector('.publish_0').setAttribute("class", "publish_1");
Run Code Online (Sandbox Code Playgroud)

Asa*_*din 34

您需要使用循环迭代所有元素并单独设置其类属性值:

var els = document.querySelectorAll('.publish_0');
for (var i=0; i < els.length; i++) {
    els[i].setAttribute("class", "publish_1");
}
Run Code Online (Sandbox Code Playgroud)

  • 当您使用一个类时,您可以使用 `getElementsByClassname` 而不是 `querySelectorAll`,它的性能会更好。查看示例 [此处](https://jsperf.com/getelementsbyclassname-vs-queryselectorall/2) (3认同)

Der*_*mba 5

对于无法使用jQuery但想要类似便利的情况,可以执行以下操作。将以下代码添加到文件顶部或其他容易看到的位置。

NodeList.prototype.forEach = NodeList.prototype.forEach || Array.prototype.forEach;
Run Code Online (Sandbox Code Playgroud)

现在,您可以在代码中执行以下操作:

document.querySelectorAll('body,main,article,[class*=content],[class*=center]')
        .forEach((function(x){ x.setAttribute("style","width:1920px");}))
Run Code Online (Sandbox Code Playgroud)

甚至更好的是,如果浏览器支持ECMAScript2015,则可以使用箭头语法:

document.querySelectorAll('[class*=content]')
        .forEach( x=> x.setAttribute("style","width:1200px"))
Run Code Online (Sandbox Code Playgroud)

您可以根据需要将语句全部放在一行上。


Viv*_*vek -4

您可以将其与 jquery 一起使用:

$(".publish_0").attr("class", "publish_1")
Run Code Online (Sandbox Code Playgroud)

Alternatively, use getElementsByClassName and loop through the DOM elements returned.

  • Vivek,虽然我很欣赏你使用 jQuery 的建议,但 OP 表达了他们对 Vanilla JavaScript 的疑问。请考虑这一点以获取未来的答案。 (3认同)