大佬教程收集整理的这篇文章主要介绍了jquery – 将动态变量从HTML传递给less.css文件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
机制是改变外观和填充的颜色.用户可以根据自己的要求更改主题.因此,当用户更改颜色时,应更改网站颜色的所有主题.
以下是我想要传递所选颜色的方法
那么,我该如何实现这种情况呢？
>为用户提供可供选择的预定义主题颜色列表(可能是下拉列表).不允许输入他们想要的任何颜色,这将是一种痛苦.
>当选择任何颜色追加时,使用jQuery / JS将颜色名称作为一个类.
>在Less中,编写以下代码,静态编译并将编译后的CSS链接到您的页面.
body { BACkground-color: red; /* default */ &.red {BACkground-color: red;} &.green{BACkground-color: green;} &.blue{BACkground-color: blue;} }
window.onload = function() { document.querySELEctor('#color-chooser').addEventListener('change',function() { document.body.className = this.value; }); }
/* compiled CSS based on the Less code provided above */ body { BACkground-color: red; /* default */ } body.red { BACkground-color: red; } body.green { BACkground-color: green; } body.blue { BACkground-color: blue; }
<label>SELEct BACkground Color:</label> <SELEct id='color-chooser'> <option value='red'>Red</option> <option value='blue'>Blue</option> <option value='green'>Green (HeX)</option> </SELEct>
或者,如果您坚持通过前端动态执行此操作,则可以使用modifyVars选项：
请注意,我不建议将此选项作为Less website itself states that it should be used only when there is no other choice.
HTML：
<!DOCTYPE html> <html> <head> <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdnjs.cloudFlare.com/ajax/libs/less.js/2.7.1/less.min.js"></script> </head> <body> <label>SELEct BACkground Color:</label> <SELEct id='color-chooser'> <option value='red'>Red</option> <option value='blue'>Blue</option> <option value='#0F0'>Green (HeX)</option> </SELEct> <script type="text/javascript" language="javascript"> document.querySELEctor('#color-chooser').addEventListener('change',function(){ less.modifyVars({ /* this sets the color to the variable */ '@bgcolor': this.value }); }); </script> </body> </html>
styles.less：
body { BACkground-color: @bgcolor; } @bgcolor: red;
Plunker Demo(无法将其放入代码段)
以上是大佬教程为你收集整理的jquery – 将动态变量从HTML传递给less.css文件全部内容，希望文章能够帮你解决jquery – 将动态变量从HTML传递给less.css文件所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。