blob: 5f30bb6566ea553a65e35152c20db46571fb5045 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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}}
|
