web-dev-qa-db-ja.com

複数の要素へのjavascriptsetattribute

ボタンをクリックするとpublish_0に変更したいクラスpublish_1のdivがたくさんあります。

今はこれを使っていますが、1つしか変更していません。

publish_0を持つすべてのアイテムにsetattributeを適用する方法。

document.querySelector('.publish_0').setAttribute("class", "publish_1");
javascriptsetattribute
12
MathieuB

これはjqueryで使用できます。

$(".publish_0").attr("class", "publish_1")

または、getElementsByClassNameを使用して、返されたDOM要素をループします。

0
Vivek

ループを使用してすべての要素を反復処理し、それらのクラス属性値を個別に設定する必要があります。

var els = document.querySelectorAll('.publish_0');
for (var i=0; i < els.length; i++) {
    els[i].setAttribute("class", "publish_1");
}
33
Asad Saeeduddin

JQueryを使用できないが、同様の便利さを求めている場合は、次のようにすることができます。次のコードをファイルの先頭または見やすい場所に追加します。

NodeList.prototype.forEach = NodeList.prototype.forEach || Array.prototype.forEach;

これで、コードでこれを行うことができます。

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

またはさらに良いことに、ブラウザがECMAScript2015をサポートしている場合は、矢印構文を使用できます。

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

必要に応じて、ステートメントをすべて1行にまとめることができます。

5
Derek Ziemba