ywork2020.com

Title

要素から属性を削除する

目次 (INDEX)

Elementとは

Element とは次の語句からなるHTMLの要素をjavascriptで表現したものです。
element
読み: エレメント
意味: 要素

removeAttributeとは

removeAttribute とは次の語句からなるjavascriptのメソッドです。
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を使用する上での要点

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

目次に戻る