web-dev-qa-db-ja.com

setAttributeを使用して要素に複数のクラスを設定するにはどうすればよいですか？

要素を複数のクラスを持つように設定するにはどうすればよいですか？

最初の試み：

element.setAttribute("class","class1","class2");
element.className="class1 , class2";
element.class="class1 , class2";
javascripthtmlcssdom
17
OVERTONE

属性を通常どおりに設定するだけです。これは、属性を、渡した文字列に設定するだけで、値の処理方法に関する特別な規則は認識していません。

この属性はスペースで区切られたクラスのリストを取るため、次のようになります。

element.setAttribute("class","class1 class2");

ただし…Internet Explorerの古いバージョン（7以下と思います）のsetAttribute実装には重大なバグがあるため、使用しないでください。代わりにclassNameプロパティを使用してください。

element.className = "class1 class2";

また、これらはHTMLクラスであることにも注意してください。彼らはスタイルの適用を超えて使用します。 CSSクラスのようなものはありません（クラスセレクター、他のセレクター、ルールセット、およびプロパティはありますが、それらすべてが（誤って、混乱して）「クラス」と呼ばれることがあります）。

36
Quentin

属性classNameは、スペースで区切られた値のリストです。

7
entonio

これを試して：

document.getElementById("MyElement").className = "class1 class2";

（2つの名前の間のコンマではなくスペースに注意してください）

または、すでにそこにあるクラスに追加したい場合：

    document.getElementById("MyElement").className += " class1 class2";
5
Dave

コンマは使用しないでください。複数のクラスの間にクラス名をスペースで設定するだけです。私はjQuery addClassメソッドを使用します-jQueryを使用している場合:)。

2
ek_ny

（現在のクラスを破壊するのではなく）追加したい場合は、

element.className = element.className + " anotherclass yetanotherclass"
2
Tim Hoolihan
`element.className = "class1" + " class2" + " class3"`;

あるいは

element.className = ["class1","class2","class3"].join(" ")

これにより、以前のすべてのクラスが書き換えられます。最近のブラウザでは、すべてのDOM要素に、アクセスできるclassListコレクションもあります。 add、remove、toggleメソッドがあります。これは、JavaScriptフレームワークが標準API自体にどのように影響したかを示す良い例です。

1
shabunc

IDにフックできれば簡単です

document.getElementById("a").className = "newClass anotherClass";

http://jsfiddle.net/jasongennaro/qaBQv/1/

1
Jason Gennaro

これは正しい答えではないでしょうか：

var yourDiv = document.getElementById("divName");
yourDiv.SetAttribute("class","RedClass"); 
yourDiv.SetAttribute("className","RedClass");

そのようにclassNameを使用して行われたことはありません（例：yourDiv.className ...）。

1
Stuart

新しいクラスが既存のクラスのリストに追加されるように、element.className += "classname"を使用しても安全です。

1
johnmanoahs