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"代替它。

我试过明显替换＆＃34;＃555＆＃34;使用＆＃34; @ color-1＆＃34;这没用。在我的script.js中，我还可以添加以下内容来更改颜色：

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

然而，我正在寻找一个解决方案，每次＆＃39; @ color-1：＆＃39;我的.less文件中的值被更改，然后上面的数据-fgcolor＆＃39;无论是通过自定义html模块还是通过js。

进行更改

感谢。

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();
});

在javascript

1 个答案: