javascript - 在 JavaScript 中使用 LESS @ 变量

Question

我正在摆弄一个自定义 html 模块，其中包含以下代码

<div id="circle1" class="circle-stat chart circliful" data-fill="transparent" data-bgcolor="#333" data-fgcolor="#555" data-percent="85" data-fontsize="38" data-width="20" data-text="85%" data-dimension="200" style="width: 200px;">

我也在使用 .less 并有一些自定义变量 (@color-1)，我想将其与 data-fgcolor="#555" 一起使用。

我显然尝试用“@color-1”替换“#555”，但没有成功。在我的 script.js 中，我还可以添加以下内容来更改颜色:

jQuery(function($){
  $('.circle-stat').attr("data-fgcolor", "#555");
  $('.circle-stat').circliful();
});

但是我正在寻找一种解决方案，每次更改 .less 文件中的“@color-1:”值时，无论是通过自定义 html 模块还是通过 js，上述“data-fgcolor”都会更改。

谢谢。

Answer 1

您不能使用 LESS 变量或一般的 CSS 来修改 html 属性。如果您坚持让 fgcolor 值驻留在您的 LESS/CSS 中(而不是仅仅存在于您的脚本中)，您将不得不使用一种解决方法。即:

<!-- this style will go in your less file -->
<style>
   .fgColorHere {
      color: @yourColorVariableGoesHere; // your desired color goes here
   }
</style>

<!-- you can just stick this element anywhere in the DOM -->
<!-- apply your color to this hidden element so we can grab the color value -->
<div id="workaroundElement" style="display: none" class="fgColorHere"/>

然后，无论您在何处使用您发布的代码，都可以执行以下操作:

jQuery(function($){
   var colorVal = $("#workaroundElement").css("color");
   $('.circle-stat').attr("data-fgcolor", colorVal);
   $('.circle-stat').circliful();
});