1, achieve the effect

2. Implementation principle

The main principle is to use CSS variables to set the color, with JS dynamic change variables, so that the color change, compatibility is as follows;

Before implementing peels, it’s important to know about pseudo-class selectors:rootAnd CSSvar()Functions andsetProperty()function

:root is a pseudo-class, indicating the root element of the document, non-IE and IE8 and above browsers are supported, in :root declaration is equivalent to the global attribute, as long as the current page references :root file, can use CSS var() function to reference;

grammar

// The name of the custom property, which must start with --
:root{
   --main_bg:#1E90FF;
   --main_color:rgba(0.100.200.1);
}
Copy the code

The var() function can replace any part of the value of any attribute in an element; The var() function cannot be used as a property name, selector, or other value other than the value of the property, which usually results in invalid syntax or a value that is not associated with the variable;

grammar

// var(--name,value)
// --name, the name of the custom attribute, must start with --; Value, optional, alternate value, used when the attribute does not exist;
.box{
    background-color: var(--main_bg);
    color: var(--box_color, red);
    border: var(--box_border,10px solid #000000);
}

Copy the code

setProperty()The CSS declaration block () method is used to set a new CSS property. You can also modify existing properties in the CSS declaration block.

grammar

let box = document.querySelector("#box").value;
document.documentElement.style.setProperty("--main_bg",box);
Copy the code

3. Complete code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> *{margin: 0; padding: 0; } #head{ height: 300px; border-bottom:1px solid gray; } #btn{ width: 100px; height: 40px; border-radius: 4px; text-align: center; line-height: 40px; color: #FFFFFF; cursor: pointer; margin-left: calc(50% - 50px); } #ipt{ width: 100%; height: 40px; line-height: 40px; font-size: 20px; text-align: center; border-right: none; border-left: none; } :root{ --main_bg:#1E90FF; } .color{ background-color: var(--main_bg); } </style> </head> <body> <div id="head" class="color"></div> <div id="body"> <input type="text" id="ipt" Placeholder =" please input color value "> <div id=" BTN "class="color" onclick="changeBg()"> </div> </div> <script> function changeBg(){let  color = document.querySelector("#ipt").value; document.documentElement.style.setProperty("--main_bg",color); } </script> </body> </html>Copy the code

If you think it is helpful, I am @pengduo, welcome to like and follow the comments; END

The articles

  • Wechat small program to upload multiple local pictures to the server and picture preview
  • DataUrl is converted to File and URL to base64
  • Wechat apPLETS API interaction custom encapsulation

Personal home page

  • CSDN
  • GitHub
  • Jane’s book
  • Blog garden
  • The Denver nuggets