在javascript使用LESS @可變

我正與它有以下代碼在javascript使用LESS @可變

<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和具有一些自定義變量（@顏色-1）的自定義HTML模塊瞎搞我想與data-fgcolor="#555"一起使用。

我已經嘗試用「@ color-1」取代「＃555」，但它沒有起作用。在我的script.js我還可以添加以下更改顏色：

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

但是我正在尋找在那裏通過每次的「@顏色1：」一個解決方案，我.LESS文件值改變，那麼無論是通過自定義html模塊還是通過js，上面的'data-fgcolor'都會改變。

謝謝。

來源

2016-02-04 nrider

雖然可以檢索JS腳本內的變化較少，它更容易和有效地做相反的事情。在JS中定義你的顏色並通過['modifyVars']傳遞給Less（http://lesscss.org/usage/#using-less-in-the-browser-options）。 –

您不能使用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(); 
});

來源

2016-02-04 22:13:16 matmo

非常感謝你的工作。 – nrider

在javascript使用LESS @可變

回答

相關問題