File tree Expand file tree Collapse file tree 1 file changed +27
-0
lines changed Expand file tree Collapse file tree 1 file changed +27
-0
lines changed Original file line number Diff line number Diff line change @@ -22,6 +22,22 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
22
22
23
23
< style >
24
24
25
+ : root {
26
+ --base : # ffc600 ;
27
+ --spacing : 10px ;
28
+ --blur : 10px ;
29
+ }
30
+
31
+ img {
32
+ padding : var (--spacing );
33
+ background : var (--base );
34
+ filter : blur (var (--blur ));
35
+ }
36
+
37
+ .hl {
38
+ color : var (--base );
39
+ }
40
+
25
41
/*
26
42
misc styles, nothing to do with CSS variables
27
43
*/
@@ -53,6 +69,17 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
53
69
</ style >
54
70
55
71
< script >
72
+ const inputs = document . querySelectorAll ( '.controls input' ) ;
73
+
74
+ function handleUpdate ( ) {
75
+ const suffix = this . dataset . sizing || '' ;
76
+ document . documentElement . style . setProperty ( `--${ this . name } ` , this . value + suffix )
77
+ }
78
+
79
+ inputs . forEach ( ( input ) => {
80
+ input . addEventListener ( 'change' , handleUpdate ) ;
81
+ input . addEventListener ( 'mousemove' , handleUpdate ) ;
82
+ } ) ;
56
83
</ script >
57
84
58
85
</ body >
You can’t perform that action at this time.
0 commit comments