jQuery中变量较少的问题 [英] Less variable issue in jquery
本文介绍了jQuery中变量较少的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个较少的文件，它使用多个较小的变量，并且在另一个较小的变量内部使用一个较小的变量来计算黑暗和亮度.我需要更改这些变量的值，以在运行时更改颜色选择器的颜色.
I have a less file which uses multiple less variable and and a less variable used inside another less variable to calculate darkness and brightness. I need to change thse variables value to change the color from color picker at run time.
代码为
@base: #35414E; // #35414E
@hue-control: contrast(@base, lighten(@base, (100 - lightness(@base)) * (@amount / 100)), darken(@base, lightness(@base) * (@amount / 100)), 50%);
我们需要在朗姆酒时间进行更新并立即显示.
We need to update at rum time and show immediately.
推荐答案
示例
<!DOCTYPE html>
<html>
<head>
<title>Less</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>
</head>
<body>
<button class="color-button">Change background</button>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var colors = ['red','blue','yellow','green','black' ];
$('.color-button').on('click', function () {
less.modifyVars({ 'body-bg' : colors[Math.floor(Math.random() * colors.length )] });
less.refreshStyles();
});
</script>
</body>
</html>
使用styles.less:
@body-bg: white;
body {
background-color: @body-bg;
}
这篇关于jQuery中变量较少的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
