1+ <!DOCTYPE html>
2+ < html >
3+ < head >
4+ < title > Updata CSS variables with JS </ title >
5+ < link href ="https://fonts.googleapis.com/css?family=Roboto " rel ="stylesheet ">
6+ < script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js "> </ script >
7+ </ head >
8+ < body >
9+ < h2 > Updata CSS variables with < span class ="hl "> JS</ span > </ h2 >
10+ < div class ="control ">
11+ < label > Spacing:</ label >
12+ < input type ="range " name ="spacing " min ="10 " max ="20 " data-sizing ='px '>
13+ < label > Blur:</ label >
14+ < input type ="range " name ="blur " min ="0 " max ='20 ' data-sizing ='px '>
15+ < label > Color:</ label >
16+ < input type ="color " name ="color " value ="#ffc600 ">
17+ < br >
18+ < br >
19+ </ div >
20+ < img class ='b ' src ="https://az616578.vo.msecnd.net/files/2016/11/06/636140659029117301-893379077_city.jpeg " width ="60% " height ="60% ">
21+ < img class ='a ' src ="https://az616578.vo.msecnd.net/files/2016/11/06/636140659029117301-893379077_city.jpeg " width ="10% " height ="10% ">
22+ </ body >
23+ 24+ < style type ="text/css ">
25+ : root {
26+ --spacing : 10px ;
27+ --color : # ffc600
28+ --blur : 10px ;
29+ }
30+ .b {
31+ padding : var (--spacing );
32+ filter : blur (var (--blur ));
33+ background : var (--color );
34+ }
35+ .hl {
36+ color : var (--color ) ;
37+ }
38+ 39+ body {
40+ text-align : center;
41+ background : # 193549
42+ color : white;
43+ font-family : 'helvetica neue' , sans-serif;
44+ font-weight : 100 ;
45+ font-size : 50px ;
46+ }
47+ 48+ 49+ </ style >
50+ < script type ="text/javascript ">
51+ var inputs = document . querySelectorAll ( '.control input' ) ;
52+ 53+ function handleUpdate ( ) {
54+ const suffix = this . dataset . sizing || '' ;
55+ document . documentElement . style . setProperty ( `--${ this . name } , this . value + suffix ) ;
56+ }
57+ 58+ inputs . forEach ( input => input . addEventListener ( 'change' , handleUpdate ) ) ;
59+ inputs . forEach ( input => input . addEventListener ( 'mousemove' , handleUpdate ) ) ;
60+ 61+ 62+ </ script >
63+ </ html >
0 commit comments