DAY03-CSS variable

day03-css Variable

Author: ©liyuechun
Synopsis: JavaScript30 is a 30 day challenge from Wes Bos. The project offers 30 video tutorials, 30 challenge starter documents, and 30 Challenge solution source code free of charge. The goal is to help people write with pure JavaScript, without using frames and libraries, and without compilers and references. Now you see the 3rd article in this series of guides. Complete guide from zero to one whole stack tribe. Implementation Effect

When you drag the slider with JavaScript and CSS3, adjust the interior margin, blur and background color of the picture in real time, and the color of the JS two word in the title also varies with the background color of the picture. related features : root var (--xxx): CSS variable (CSS Variables) Filter:blur () event change, MouseMove HTML source

   
CSS Source 
  <style>
     : Root {
      --base: #ffc600;
      --spacing:10px;
      --blur:10px;
    }

    img {

      width:600px;
      height:400px;
      Padding:var (--spacing);
      Background:var (--base);
      Filter:blur (Var (--blur));

    HL {
      Color:var (--base);
    }
      /* Misc styles, nothing to do with CSS
    variables

    /body {
      text-align:center;
      Background: #193549;
      Color:white;
      font-family: ' Helvetica Neue ', Sans-serif;
      font-weight:100;
      font-size:30px
    }

    . controls {
      margin-bottom:50px;
    }

    input {
      width:100px;
    }

    . result {
      Display:flex;
      Flex-direction:row;
      Justify-content:center;
      Color:var (--base);

    Showtext {
      margin:0px 25px 50px 25px;
    }
  </style>
 
JS Source 
  <script>
    Const INPUTS = Document.queryselectorall ('. Controls input ');

    function Handleupdate () {
      const suffix = this.dataset.sizing | | '';
      Document.documentElement.style.setProperty ('--${this.name} ', this.value + suffix);
      document.getElementById (' Label_${this.name} '). innertext = this.value + suffix;
    }

    Inputs.foreach (Input => input.addeventlistener (' Change ', handleupdate));
    Inputs.foreach (Input => input.addeventlistener (' MouseMove ', handleupdate));
  </script>
 
Process Guidance 
CSS Part PreparationA CSS variable that declares global (: root) applies a variable to the CSS value of the corresponding element  process title in the page
JS Real-time update CSS valuesGets the input element in the page to add a listener event to each input, causing it to change in value, triggering an update operation with 2, adding a mouse-sliding event listener writing methods to handle update operations

Get parameter value suffix

Gets the parameter name (blur, spacing, color) to get the value of the argument (12px, #efefef) assignment to the corresponding CSS variable
Basic Knowledge 
The difference between nodelist and Array

You can open proto to view it, including ForEach (), item (), keys (), and so on. In the prototype of array, there are methods such as map (), pop () and so on.

Custom data attribute dataset in HTML5

HTML5 You can add non-standard custom attributes to an element, just add the data-prefix, and you can name it casually. Once added, these values can be accessed through the DataSet property of the element, which is an instantiated object of Domstringmap that contains the name-value pairs of the custom attributes that were previously set.

CSS variable

This is a new feature of CSS3, IE and Edge are not currently supported. The name is the variable name, which is called VAR (--variable name) when referencing the variable. See the next code for a specific example.

: Root Pseudo class

This pseudo element matches the root element of the document, which is the 
So it's often used to declare global CSS variables:

: root {
  --color: #fff;
}
 
When in use:

img {
  Background:var (--base);
}
 
CSS Filter Filter

CSS filters provide a number of graphic effects, such as Gaussian blur, sharpening, discoloration, and so on. It comes with some preset functions that can be called with arguments when used. is supported in both Chrome and Firefox. Solving Difficulties

How to handle parameter values (one with PX, another without)

Using the dataset storage suffix, the <input data-sizing:px> is set in the label with the PX suffix:

<input type= "range" Name= "blur" min= "0" max= "" value= "ten" data-sizing= "px" >
<input "Color" type= " Base "Value=" #8aa8af >
 
JS to obtain the suffix value by dataset.sizing:

 
At this point, the value suffix gets is null for the color, and for the length class is ' px '.

How to change CSS property values with JavaScript. 

Document.documentelement in JavaScript represents the document root element. So to change the global CSS variable, you can write this:

Document.documentElement.style.setProperty ('--base ', ' #fff ');
 
Source Download 
Github Source Code


 
 
 
  
 
   
 
    
 sweep code application to join full stack tribe