回答編集履歴
1
class 属性書き換え推奨の説明が抽象的だったので具体例を書き加えて大幅に編集
answer
CHANGED
|
@@ -44,12 +44,41 @@
|
|
|
44
44
|
</script>
|
|
45
45
|
```
|
|
46
46
|
|
|
47
|
-
|
|
47
|
+
---
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
ただし、文脈によっては class の付け外しで制御した場合もあります。
|
|
50
|
-
|
|
50
|
+
よくあるアコーディオンメニューのスクリプトを例にとります。
|
|
51
51
|
|
|
52
|
+
```HTML
|
|
53
|
+
<style>
|
|
54
|
+
.sample { /* アコーディオン最上位要素 */ }
|
|
55
|
+
.hoge { /* アコーディオン開閉要素(default) */ }
|
|
56
|
+
.hidden { /* アコーディオン開閉要素を閉じる CSSRule */ }
|
|
57
|
+
</style>
|
|
58
|
+
</head>
|
|
59
|
+
<body>
|
|
60
|
+
<dl class="sample">
|
|
61
|
+
<dt>A</dt>
|
|
62
|
+
<dd class="hoge">Aの説明文</dt>
|
|
63
|
+
<dt>B</dt>
|
|
52
|
-
|
|
64
|
+
<dd class="hoge hidden">Bの説明文</dt>
|
|
65
|
+
<dt>C</dt>
|
|
66
|
+
<dd class="hoge hidden">Cの説明文</dt>
|
|
67
|
+
</dl>
|
|
68
|
+
```
|
|
53
69
|
|
|
70
|
+
dd要素がアコーディオンで開閉する要素であり、`.hidden` で閉じた要素、`.hidden` が存在しないのが開いた要素です。
|
|
71
|
+
`.hidden` を付与する事で閉じた事が分かるようにする効果があります。
|
|
72
|
+
(説明が複雑になるので省略しますが、WAI-ARIA の [aria-hidden](http://momdo.github.io/wai-aria-1.1/#aria-hidden) 属性を使うべきかもしれません)
|
|
73
|
+
|
|
74
|
+
もし、このアコーディオンで全てのdd要素を閉じる為に `.hoge` の CSSRule を書き換える実装にした場合、後で対象のdd要素が閉じているか、開いているか、を判断するためにdd要素ノードの getComputedStyle を確認するか、`.hoge` の CSSRule を参照しなくてはなりません。
|
|
75
|
+
CSSRule を辿るなら `.hoge` だけでは十分ではない場合もあり、`.sample>.hoge` や `dd.hoge` 等の対象要素に適用される全ての CSSRule を参照する状況も考えられます。
|
|
76
|
+
|
|
77
|
+
質問の背景が不明なので確かな事はいえませんが、「論理的な意味付けなしに `.hoge` の CSSRule が書き換わる状況」が私には想定できませんでした。
|
|
78
|
+
論理的な意味付けなしに CSSRule が書き換わるとすれば、それは CSS でやるべき実装にも思えます。
|
|
79
|
+
「外部CSSを編集できる権限がなくて JavaScript で CSSRule を書き換える」というケースであれば納得できますが、ちょっとイレギュラーすぎかもしれませんね。
|
|
80
|
+
|
|
54
81
|
P.S.
|
|
55
|
-
解決済みのようですが、[NIA さん](https://teratail.com/questions/14433#r22172)からリクエストを頂いたので回答しています。
|
|
82
|
+
解決済みのようですが、[NIA さん](https://teratail.com/questions/14433#r22172)からリクエストを頂いたので回答しています。
|
|
83
|
+
|
|
84
|
+
(2015/08/19 14:25追記) class 属性書き換え推奨の説明が抽象的だったので具体例を書き加えて大幅に編集しました。
|