[フロントエンドデモ] 動的割り当てCSS

記事ディレクトリ

その他のデモ

効果

ここに画像の説明を挿入
CSS スタイルを動的に表示し、:root均一に設定します。

効果のプレビュー: https://codepen.io/karshey/pen/BavLrwy

参考：

動的CSS変数(codepen.io)

document.documentElement と document.body について語る - ブリーフブック (jianshu.com)

プロセス

html実装

スライドスライダーとスライドはborder-radiusによって実装され<input type='range'>、色の選択はによって<input type='color'>実装されます。

ここに画像の説明を挿入
半径については、四隅が同時に変化する最大値は 50% です。

oninput イベントと onchange イベント

oninput イベントは、ユーザーが入力すると発生します。
イベントは<input>or<textarea> 要素内にあります値が変化するとき引き金。

このイベントは、onchange イベントに似ています。違い：oninput イベントは要素の値が変更されるとすぐに発生し、onchange は要素がフォーカスを失ったときに発生します。

ここで、フォーカスを失ってもスライダーのスライドをトリガーできないことは明らかです (スライダーがスライドするときにボックスも同期して移動する必要があります)、色の選択は問題ありません (空白をクリックして色を変更してみてください)。色を選択すると、ボックスの色が変わります)。

統合された設定CSS

私たちの目標は、ボックスのスタイルを動的に変更することです。したがって、ボックスのスタイルはルートで均一に設定できます。

/* 统一配置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;
}

したがって、ボックスのスタイルを変更したい場合は、の:root値を変更するだけで済みます。

ここで、ルートの変数名 ( color、location、 ) がメソッドの最初のパラメーターradiusに対応することに注意してください。changeValue

ここに画像の説明を挿入

したがって、入力タイプを連結することで--CSS 変数を直接形成し、直接割り当てることができます。

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

色の割り当ては加算する必要はありません%が、border-radius合計の値はtransform: translateX()加算する必要があることに注意してください%。

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

ここでのルートは、htmlタグから始まるドキュメントツリー(DOMツリー)全体です。root.style.setPropertyCSS 変数をドキュメントツリーの先頭に直接割り当てるスタイルを使用します。カバー元の CSS の変数:root。

これにより、CSS を動的に割り当てることができます。

ここに画像の説明を挿入

参考: document.documentElement と document.body について語る - ショートブック (jianshu.com)

コード

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)
}