diff options
-rw-r--r-- | files/ja/web/api/element/toggleattribute/index.md | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/files/ja/web/api/element/toggleattribute/index.md b/files/ja/web/api/element/toggleattribute/index.md new file mode 100644 index 0000000000..5f30bb6566 --- /dev/null +++ b/files/ja/web/api/element/toggleattribute/index.md @@ -0,0 +1,97 @@ +--- +title: Element.toggleAttribute() +slug: Web/API/Element/toggleAttribute +tags: + - API + - Element + - メソッド + - リファレンス +browser-compat: api.Element.toggleAttribute +translation_of: Web/API/Element/toggleAttribute +--- +{{APIRef("DOM")}} + +**`toggleAttribute()`** は {{domxref("Element")}} インターフェイスのメソッドで、この要素に対して論理属性をトグル切り替えします(存在する場合は取り除き、存在しない場合は追加します)。 + +## 構文 + +```js +toggleAttribute(name); +toggleAttribute(name, force); +``` + +### 引数 + +- `name` + - : {{domxref("DOMString")}} で、トグル切り替えしたい属性の名前を指定します。 HTML 文書内の HTML 要素に対して `toggleAttribute()` が呼び出されるとばれると、属性名は自動的に全て小文字に変換されます。 +- `force` {{optional_inline}} + - : 論理値で、以下の効果があります。 + - 指定されなかった場合、 `toggleAttribute` メソッドは `name` という名前の属性を「トグル切り替え」します。 — 存在すれば取り除き、存在しなければ追加します。 + - true であった場合、 `toggleAttribute` メソッドは、 `name` という名前の属性を追加します。 + - false であった場合、 `toggleAttribute` メソッドは `name` という名前の属性を取り除きます。 + +### 返値 + +**`name`** という属性が存在する状態になれば `true`、そうでなければ `false` となります。 + +### 例外 + +- `InvalidCharacterError` {{domxref("DOMException")}} + - : 指定された属性 `name` に、属性名として無効な文字が 1 文字以上含まれています。 + +## 例 + +次の例では、 `toggleAttribute()` を使って {{HTMLElement("input")}} の `disabled` 属性をトグル切り替えしています。 + +### HTML + +```html +<input value="text"> +<button>toggleAttribute("disabled")</button> +``` + +### JavaScript + +```js +var button = document.querySelector("button"); +var input = document.querySelector("input"); + +button.addEventListener("click", function(){ + input.toggleAttribute("disabled"); +}); +``` + +### 結果 + +{{ EmbedLiveSample('Example', '300', '50') }} + +{{DOMAttributeMethods}} + +## ポリフィル + +```js +if (!Element.prototype.toggleAttribute) { + Element.prototype.toggleAttribute = function(name, force) { + if(force !== void 0) force = !!force + + if (this.hasAttribute(name)) { + if (force) return true; + + this.removeAttribute(name); + return false; + } + if (force === false) return false; + + this.setAttribute(name, ""); + return true; + }; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} |