[Front-end demo] Dynamic assignment CSS

Article Directory

Other demos

Effect

insert image description here
Dynamically display CSS styles and :rootconfigure them uniformly.

Effect preview: https://codepen.io/karshey/pen/BavLrwy

reference:

Dynamic CSS Variables(codepen.io)

Talking about document.documentElement and document.body - Brief Book (jianshu.com)

process

html implementation

Sliding sliders and slides are implemented border-radiusby <input type='range'>, and color selection is <input type='color'>implemented by

insert image description here
For radius, the maximum value that the four corners change together is 50%.

oninput and onchange events

The oninput event fires when the user types.
The event is in <input>the or <textarea> element'swhen the value changestrigger.

This event is similar to the onchange event. the difference:The oninput event fires immediately when the element's value changes, and onchange fires when the element loses focus.

Here, it is obvious that the sliding of the slider cannot be triggered by losing the focus (the box must move synchronously when the slider slides), but the color selection is OK (you can try it, change the color by clicking on the blank area after selecting the color, the box color will change).

Unified configuration CSS

Our goal is to dynamically change the style of the box. Therefore, the style of the box can be uniformly configured at the root:

/* 统一配置box的样式 */
:root {
    
    
    --color: #000;
    --location: 0;
    --radius: 0;
}

.box {
    
    
    height: 200px;
    width: 200px;
    
    background-color: var(--color);
    border-radius: var(--radius);
    /* 向右移动 */
    transform: translateX(var(--location));
    transition: width 2s;
}

Therefore, if you want to change the style of the box, you only need to change :rootthe value in.

colorNote that the variable name ( , location, ) in the root here radiuscorresponds to changeValuethe first parameter of the method.

insert image description here

--Therefore, CSS variables can be directly formed by concatenating the input type and then assigned directly.

root.style.setProperty(`--${
      
      type}`, value + add)

Note that the assignment of the color does not need to be added %, but the value of border-radiusthe transform: translateX()sum must be added %.

const root = document.documentElement;
function changeValue(type, value) {
    
    
    console.log(root)
    const add = (type != 'color' ? '%' : '');
    root.style.setProperty(`--${
      
      type}`, value + add)
}

The root here is the entire document tree (DOM tree) starting from the html tag. We use root.style.setPropertythe style that assigns CSS variables directly at the beginning of the document tree, justcoverThe variables in the original CSS :root.

This allows dynamic assignment of CSS.

insert image description here

Reference: Talking about document.documentElement and document.body - Short Book (jianshu.com)

the code

HTML

<!-- author:https://blog.csdn.net/karshey -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic CSS Variables</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="location item">
            <p>滑动移动方块位置</p>
            <input type="range" value="0" min="0" max="200" oninput="changeValue('location',this.value)">
        </div>
        <div class="radius item">
            <p>滑动改变方块弧度</p>
            <input type="range" value="0" min="0" max="50" oninput="changeValue('radius',this.value)">
        </div>
        <div class="color item">
            <p>选择改变方块颜色</p>
            <input type="color" value="#000000" onchange="changeValue('color',this.value)">
        </div>

        <div class="box"></div>
    </div>
</body>

</html>

<script src="index.js"></script>

CSS

/* 统一配置box的样式 */
:root {
    
    
    --color: #000;
    --location: 0;
    --radius: 0;
}

.container {
    
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

.item {
    
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.item p {
    
    
    margin-right: 10px;
}

.box {
    
    
    height: 200px;
    width: 200px;
    
    background-color: var(--color);
    border-radius: var(--radius);
    /* 向右移动 */
    transform: translateX(var(--location));
    transition: width 2s;
}

JS

const root = document.documentElement;
function changeValue(type, value) {
    
    
    console.log(root)
    const add = (type != 'color' ? '%' : '');
    root.style.setProperty(`--${
      
      type}`, value + add)
}