DOM

：

：

Element.toggleAttribute() メソッド

　編集：2022.09.25 by T.A.

[Edge]。→、、

targetElement の指定の論理属性の値を切り替えをします。属性の結果が true に値する場合は属性が追加され、false に値するなら削除されます。

構文
targetElement.toggleAttribute(attrName[, force])
element Element オブジェクト。
attrName 属性名を表す DOMString です。

HTML 文書内の HTML 要素に対して toggleAttribute() が呼び出されるとばれると、属性名は自動的に全て小文字に変換されます。

force 省略可。論理値。

省略した場合、attrName という名前の属性を「トグル切り替え」します。

指定した場合は、以下の様になるようです。

true attrName という名前の属性を追加し、値は「true」となるようです。
false attrName という名前の属性を取り除きます。
戻り値

¶結果、attrName という属性が存在する状態になれば true、そうでなければ false となります。

例外
InvalidCharacterError（DOMException）
指定された属性 attrName に、属性名として無効な文字が 1 文字以上含まれています。
例

toggleAttribute() を使って <input> の disabled 属性をトグル切り替えしています。

HTML： 

<input value="text">
<button>toggleAttribute("disabled")</button>

JavaScript： 

var button = document.querySelector("button");
var input = document.querySelector("input");

button.addEventListener("click", function(){
  input.toggleAttribute("disabled");
});
attrNameのみ指定

HTML： 

<INPUT id=IdTest value="text">

JavaScript： 

D=IdTest.toggleAttribute("disabled"); //＝[boolean]：true
DA=IdTest.outerHTML; //＝[string]：<input id="IdTest" value="text" disabled="">

↑INPUT要素は入力禁止になる。 

D=IdTest.toggleAttribute("disabled"); //＝[boolean]：false
DA=IdTest.outerHTML; //＝[string]：<input id="IdTest" value="text">

↑INPUT要素は入力可能な状態になる。

HTML： 入力禁止のINPUT要素。 

<INPUT id=IdTest value="text" disabled>

JavaScript： 

D=IdTest.toggleAttribute("disabled"); //＝[boolean]：false
DA=IdTest.outerHTML; //＝[string]：<input id="IdTest" value="text">

↑INPUT要素は入力許可になった。disabled は削除された。

→outerHTML。

forceの効果

HTML： 入力可能な状態のINPUT要素。 

<INPUT id=IdTest value="text">

JavaScript： これで入力禁止にさせてみるが、 

D=IdTest.toggleAttribute("disabled", false); //＝[boolean]：false
DA=IdTest.outerHTML; //＝[string]：<input id="IdTest" value="text">

↑入力禁止にはならなかった。

HTML： 最初から入力禁止のINPUT。 

<INPUT id=IdTest value="text" disabled=true>

JavaScript： 入力が可能になるか？ 

D=IdTest.toggleAttribute("disabled", true); //＝[boolean]：true
DA=IdTest.outerHTML; //＝[string]：<input id="IdTest" value="text" disabled="true">

入力不可のままで。disabled="true" になっている。

テスト