回答編集履歴
2
文言
answer
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
イベントの問題というよりは、スタイルの優先順位の問題です。
|
|
2
2
|
|
|
3
|
-
`combine.style.なんとか` で設定したプロパティは、スタイルシートで指定しているプロパティより常に優先順位が高くなります。よって、いったん `change` イベントが発生するとそのイベントリスナで更新したプロパティに関しては `active` クラスの付け外しによる
|
|
3
|
+
`combine.style.なんとか` で設定したCSSプロパティは、スタイルシートで指定しているCSSプロパティより常に優先順位が高くなります。よって、いったん `change` イベントが発生するとそのイベントリスナで更新したCSSプロパティに関しては `active` クラスの付け外しによる値変更はできなくなります。
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
`change` イベントハンドラのほうもクラスの付け外しにして、
|
1
:invalid の紹介
answer
CHANGED
|
@@ -9,4 +9,8 @@
|
|
|
9
9
|
combine.classList.toggle('non-empty', combine.value !== "");
|
|
10
10
|
});
|
|
11
11
|
```
|
|
12
|
-
`active` クラスと `non-empty` クラスの組み合わせでどういうスタイルになるかはスタイルシートで定義しましょう。
|
|
12
|
+
`active` クラスと `non-empty` クラスの組み合わせでどういうスタイルになるかはスタイルシートで定義しましょう。
|
|
13
|
+
|
|
14
|
+
----
|
|
15
|
+
|
|
16
|
+
参考までに、`<textarea>` に `required` 属性を付けると、入力がないときは `:invalid` 擬似クラスにマッチするようになります。
|