回答編集履歴
2
.foo.bar
answer
CHANGED
|
@@ -9,6 +9,9 @@
|
|
|
9
9
|
.bar {
|
|
10
10
|
filter: grayscale(100%);
|
|
11
11
|
}
|
|
12
|
+
.foo.bar {
|
|
13
|
+
filter: blur(3px) grayscale(100%);
|
|
14
|
+
}
|
|
12
15
|
</style>
|
|
13
16
|
|
|
14
17
|
<div id="sample" style="background:red;width:300px;height:300px;">filter test</div>
|
|
@@ -16,11 +19,15 @@
|
|
|
16
19
|
<input type="button" value="ボタン2" data-action="add" data-set-class="bar">
|
|
17
20
|
<script>
|
|
18
21
|
'use strict';
|
|
19
|
-
|
|
22
|
+
{
|
|
20
|
-
|
|
23
|
+
const handleClick = function handleClick (event) {
|
|
21
24
|
const input = event.target;
|
|
22
25
|
input.ownerDocument.getElementById('sample').classList.add(input.dataset.setClass);
|
|
23
|
-
}
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
for (let input of document.querySelectorAll('input[data-set-class]')) {
|
|
29
|
+
input.addEventListener('click', handleClick, false);
|
|
30
|
+
}
|
|
24
31
|
}
|
|
25
32
|
</script>
|
|
26
33
|
```
|
1
filter test
answer
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
}
|
|
12
12
|
</style>
|
|
13
13
|
|
|
14
|
-
<div id="sample" style="background:red;width:300px;height:300px;">
|
|
14
|
+
<div id="sample" style="background:red;width:300px;height:300px;">filter test</div>
|
|
15
15
|
<input type="button" value="ボタン1" data-action="add" data-set-class="foo">
|
|
16
16
|
<input type="button" value="ボタン2" data-action="add" data-set-class="bar">
|
|
17
17
|
<script>
|