Title

要素から属性を削除する

目次 (INDEX)

Elementとは

element: 読み: エレメント
意味: 要素

removeAttributeとは

remove: 読み: リムーブ
意味: 削除
attribute: 読み: アトリビュート
意味: 属性

目次に戻る

Element.removeAttributeの概要

このメソッドは、要素から指定した属性を削除します。また、要素に指定した属性がない場合には、undefined(参照できない)が返ります。

目次に戻る

サンプルコードと実行結果

このサンプルではremoveAttributeメソッドを使って、要素から class 属性を削除しています。 CSSでclassにスタイルを設定しているので、class属性が削除されれば、そのスタイルは無効となります。

サンプルコード: CSS

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

02: newClassというclassにスタイル付け
03: text-decorationプロパティで緑色の波下線を設定

サンプルコード: HTML

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

03: output要素 id="idAnswer"(この要素からclassが削除されることになる)
06: input要素 button型(この要素をクリックするとevtName()関数を呼び出す)

サンプルコード: script

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

02: elmAnswerという要素参照の変数を宣言 (idAnswer)
03: 関数を定義 (evtName()関数)
04: ここでelmAnswerからclass属性を削除

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

目次に戻る

removeAttributeを使用する上での要点

引数は文字型
構文: Element.removeAttribute(attrName)
構文: Element.removeAttribute(属性名)

目次に戻る