回答編集履歴

2

.foo.bar

2021/09/25 02:04

投稿

think49
think49

スコア18189

test CHANGED
@@ -20,6 +20,12 @@
20
20
 
21
21
  }
22
22
 
23
+ .foo.bar {
24
+
25
+ filter: blur(3px) grayscale(100%);
26
+
27
+ }
28
+
23
29
  </style>
24
30
 
25
31
 
@@ -34,15 +40,23 @@
34
40
 
35
41
  'use strict';
36
42
 
37
- for (let input of document.querySelectorAll('input[data-set-class]')) {
43
+ {
38
44
 
39
- input.addEventListener('click', function handleClick (event) {
45
+ const handleClick = function handleClick (event) {
40
46
 
41
47
  const input = event.target;
42
48
 
43
49
  input.ownerDocument.getElementById('sample').classList.add(input.dataset.setClass);
44
50
 
45
- }, false);
51
+ };
52
+
53
+
54
+
55
+ for (let input of document.querySelectorAll('input[data-set-class]')) {
56
+
57
+ input.addEventListener('click', handleClick, false);
58
+
59
+ }
46
60
 
47
61
  }
48
62
 

1

filter test

2021/09/25 02:03

投稿

think49
think49

スコア18189

test CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
 
26
26
 
27
- <div id="sample" style="background:red;width:300px;height:300px;">no filter</div>
27
+ <div id="sample" style="background:red;width:300px;height:300px;">filter test</div>
28
28
 
29
29
  <input type="button" value="ボタン1" data-action="add" data-set-class="foo">
30
30