JavaScript: Element.setAttribute (セットアトリビュート)の解説

このメソッドは、要素に新しい属性を追加します。また、要素に既存の属性がある場合には、その属性の値を上書きします。

サンプルを見る前に構文を確認しておきます。

Element.setAttribute(name,value);

このサンプルではsetAttributeメソッドを使って、要素に class 属性を追加しています。 CSSでclassにスタイルを設定しているので、class属性が追加されれば、そのスタイルが適用されます。

サンプルコード: CSS

<style>
	.newClass{
		text-decoration: underline wavy ##green;
	}
</style>

サンプルコード: HTML

<body>
	<p>
		<output id="idAnswer">innerHTML</output>
	</p>
	<p>
		<input type="button" value="ボタン" onclick="evtName()">
	</p>
</body>

サンプルコード: script

<script>
	let elmAnswer = document.getElementById("idAnswer");
	function evtName(){
		elmAnswer.setAttribute("class", "newClass");
	}
</script>

実行結果:
答え: id="idAnswer" innerHTML 実行:

Title