【前端demo】动态赋值CSS

【前端demo】动态赋值CSS
文章目录
- 效果
 过程
 html实现
 oninput与onchange事件
 统一配置CSS
 
 代码
 HTML
 CSS
 JS
其他demo

效果

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

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

参考：

Dynamic CSS Variables(codepen.io)

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

过程

 html实现

滑动滑块和滑动border-radius由实现，选择颜色由实现

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

oninput与onchange事件

oninput 事件在用户输入时触发。
该事件在或 </code>元素的值发生改变时触发。 该事件类似于 onchange事件。不同之处：oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。 在这里，显然滑块的滑动是不能失去焦点才触发的（滑块滑动的时候box要同步移动），但颜色的选择可以（可以试一试，改变颜色是选择颜色之后再点击空白区域，方块颜色才会发生改变）。 <h4><a name="t5"></a><a id="CSS_36"></a>统一配置CSS</h4> 我们的目的是实现动态改变box的样式。因此，可以将box的样式统一在root处配置： <pre data-index="0" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;">/* 统一配置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; } <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li></ul></pre> 因此，如果想改变box的样式，只需改变<code>:root</code>中的值即可。 注意，这里root中的变量名（<code>color</code>，<code>location</code>，<code>radius</code>），正好对应方法<code>changeValue</code>的第一个参数。 <img src="https://1000bd.com/contentImg/2024/04/10/d48d78ee3fcf8e24.png" alt="在这里插入图片描述"> 因此可以通过将输入的type与<code>--</code>拼接直接形成CSS变量，然后直接赋值。 <pre data-index="1" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;">root.style.setProperty(`--${type}`, value + add) <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 注意，颜色的赋值是不用加<code>%</code>的，而<code>border-radius</code>和<code>transform: translateX()</code>的数值要加<code>%</code>。 <pre data-index="2" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;">const root = document.documentElement; function changeValue(type, value) { console.log(root) const add = (type != 'color' ? '%' : ''); root.style.setProperty(`--${type}`, value + add) } <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> 这里的root是从html标签开始的整个文档树（DOM树）。我们使用<code>root.style.setProperty</code>将CSS变量直接赋值在文档树开头的style，就覆盖了原本CSS中的<code>:root</code>中的变量。 这样就可以动态赋值CSS。 <img src="https://1000bd.com/contentImg/2024/04/10/262b0eaa7a9d0751.png" alt="在这里插入图片描述"> <blockquote> 参考：<a href="https://www.jianshu.com/p/fb867e8109f7" rel="nofollow">漫谈document.documentElement与document.body - 简书 (jianshu.com)</a> </blockquote> <h3><a name="t6"></a><a id="_91"></a>代码</h3> <h4><a name="t7"></a><a id="HTML_93"></a>HTML</h4> <pre data-index="3" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <!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> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li></ul></pre> <h4><a name="t8"></a><a id="CSS_131"></a>CSS</h4> <pre data-index="4" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;">/* 统一配置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; } <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li></ul></pre> <h4><a name="t9"></a><a id="JS_172"></a>JS</h4> <pre data-index="5" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;">const root = document.documentElement; function changeValue(type, value) { console.log(root) const add = (type != 'color' ? '%' : ''); root.style.setProperty(`--${type}`, value + add) } <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> </div> </div> </li> <li class="list-group-item ul-li"> 相关阅读: <a href="/Article/Index/1043100">Go学习笔记</a> <a href="/Article/Index/825887">IDEA—右边maven模块不见了</a> <a href="/Article/Index/1361120">10-11 周三 shell xargs tr curl 做大事情</a> <a href="/Article/Index/879425">Intel RealSense D435i与IMU标定用于vins-fusion</a> <a href="/Article/Index/1220144">docker上面部署nginx-waf 防火墙“modsecurity”，使用CRS规则，搭建WEB应用防火墙</a> <a href="/Article/Index/1276777">QCustomPlot单多坐标系显示</a> <a href="/Article/Index/1395622">旺店通企业版与金蝶云星辰数据集成方案分享</a> <a href="/Article/Index/939611">四则运算易语言代码</a> <a href="/Article/Index/641901">备战数学建模30-回归分析2</a> <a href="/Article/Index/1429833">机器人软硬件系统集成</a> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/karshey/article/details/132674057 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" />京公网安备 11010502049817号</a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>

文章目录

效果

过程

html实现

oninput与onchange事件