【前端demo】动态赋值CSS

文章目录

其他demo

效果

动态显示CSS样式,由:root统一配置。

效果预览:https://codepen.io/karshey/pen/BavLrwy

参考:

Dynamic CSS Variables(codepen.io)

漫谈document.documentElement与document.body - 简书 (jianshu.com)

过程

html实现

滑动滑块和滑动border-radius<input type='range'>实现,选择颜色由<input type='color'>实现

对于radius,四个角一起变化的最大值是50%。

oninput与onchange事件

oninput 事件在用户输入时触发。

该事件在 <input><textarea> 元素的值发生改变时触发。

该事件类似于 onchange事件。不同之处:oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触发。

在这里,显然滑块的滑动是不能失去焦点才触发的(滑块滑动的时候box要同步移动),但颜色的选择可以(可以试一试,改变颜色是选择颜色之后再点击空白区域,方块颜色才会发生改变)。

统一配置CSS

我们的目的是实现动态改变box的样式。因此,可以将box的样式统一在root处配置:

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

因此,如果想改变box的样式,只需改变:root中的值即可。

注意,这里root中的变量名(colorlocationradius),正好对应方法changeValue的第一个参数。

因此可以通过将输入的type与--拼接直接形成CSS变量,然后直接赋值。

javascript 复制代码
root.style.setProperty(`--${type}`, value + add)

注意,颜色的赋值是不用加%的,而border-radiustransform: translateX()的数值要加%

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

这里的root是从html标签开始的整个文档树(DOM树)。我们使用root.style.setProperty将CSS变量直接赋值在文档树开头的style,就覆盖了原本CSS中的:root中的变量。

这样就可以动态赋值CSS。

参考:漫谈document.documentElement与document.body - 简书 (jianshu.com)

代码

HTML

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

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

javascript 复制代码
const root = document.documentElement;
function changeValue(type, value) {
    console.log(root)
    const add = (type != 'color' ? '%' : '');
    root.style.setProperty(`--${type}`, value + add)
}
相关推荐
前端开发与ui设计的老司机12 分钟前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人14 分钟前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
翻滚吧键盘1 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。1 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)2 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~2 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中2 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我2 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing2 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心2 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css