通过 JavaScript 代码可以更改 HTML 中的 CSS 属性变量值，并实时更新页面的样式，其核心功能包括使用滑块和颜色选择器等输入元素动态更改 CSS 变量，该轻量级控件可以让用户实时控制间距、颜色和模糊效果，从而增强用户体验。使用起来也多功能简单，只需要为项目创建 HTML 结构，在 <div class="controls"> 中，添加滑块和颜色选择器等元素，这些元素将允许用户与 CSS 变量进行交互，后续再把下载后的css以及js文件引入项目即可
<main class="cd__main"> <!-- Start DEMO HTML (Use the following code into your project)--> <h2>使用<span class="hl">JS</span>更新CSS属性</h2> <div class="controls"> <label for="spacing">内边距:</label> <input data-sizing="px" id="spacing" max="200" min="10" name="spacing" type="range" value="10" /> <label for="blur">模糊程度:</label> <input data-sizing="px" id="blur" max="25" min="0" name="blur" type="range" value="10" /> <label for="base">基础颜色</label> <input id="base" name="base" type="color" value="#ffc600"/> </div> <img src="img/ZfXM8MbxoM.jpg"/> <!-- END EDMO HTML (Happy Coding!)--> </main>
