Question

我的文件颜色较少，定义如下：

@black:                 #000;
@greyDarker:            #222;
...etc

并希望能够在javascript中访问这些内容，例如：

$('body').style('color', 'window.colours.black') // or however I assign them

会起作用。

由于Less正在编译服务器端，因此通常的选项不起作用。

我已经开始继续编写一个繁琐的任务来从这些较少的规则生成一个js文件，但这似乎是一种低效/黑客的方式。

有关更好的方法或工具的任何建议可以提供帮助

Answer 1

您可以在CSS中放置一些特殊定义来传递定义。这些只用于传递变量而不是其他任何东西。你需要提出一些惯例，我在这里使用了div.less-rule- {rule-name}

例如。

div.less-rule-black {
    background-color: @black;
}
div.less-rule-grey-darker {
    background-color: @greyDarker;
}

然后，您可以使用JavaScript API来访问样式表。你可以将它放在某个实用程序类中。这只需要在加载所有样式表时完成一次。

var rules, rule, i, n, j, m, key;
var lessRules = [];
for (i = 0, n = document.styleSheets.length; i < n; i++) {
    rules = document.styleSheets[i].cssRules; 
    for (j = 0, m = rules.length; j < m; j++) {
        rule = rules[j];
        if (rules[j].selectorText.indexOf('less-rule') !== -1) {
           key = /div.less-rule-(.*)/.exec(rules[j].selectorText)[1];
           lessRules[key] = rule.style['background-color']; 
        }
    }
}

然后，您可以使用哈希中的密钥来访问变量。

console.log(lessRules['black']);
console.log(lessRules['grey-darker']);

Answer 2

您可以将每种颜色附加到样式规则中的类名称，然后将特定类添加到对象中以触发所需颜色的设置。类名将在CSS样式中定义，然后您只需在javascript中通过字符串名称引用它们。

CSS：

.black {color: #000;}
.greyDarker {color: #222;}

使用Javascript：

$('body').addClass('black');

您还可以使用浏览器中内置的CSS颜色名称：

$('body').css('color', 'black');

以下是内置的颜色名称列表：http://www.crockford.com/wrrrld/color.html和http://www.cssportal.com/css3-color-names/，

除此之外，如果您想要以编程方式访问颜色的符号名称，那么您需要为名称生成自己的Javascript定义，并将其包含在您可以使用这些符号的javascript中。

Answer 3

首先使用LESS变量向CSS添加规则。然后使用该类创建一个虚拟元素，并检查其getComputedStyle颜色：

＆＃13;

function getLessVariableValue(variable) {
    var elt = document.createElement('div');
    elt.className = variable+"-variable";
    elt.style.display= "none";        // ensure element is not visible
    document.body.appendChild(elt);   // elt must be in DOM to compute styles
    var result = window.getComputedStyle(elt).fontFamily;
    document.body.removeChild(elt);
    return result;
}

document.writeln(getLessVariableValue('purple'))

＆＃13;

/* replace "purple" below with '@purple' etc. */
.purple-variable { font-family: purple; }

＆＃13;

我们使用font-family，因为它可以将任意字符串作为其值。

或者，您可以查看.purple-variable作为选择器的样式规则，正如@Adam在答案中所建议的那样。对我来说，似乎有点参与其中。

然而，这似乎要做很多工作，要完成 - 什么？可能有更好的方法来完成你想要做的事情。

Answer 4

你可以使用css变量如

let StyleVars = document.querySelector(':root');
// Create a function for getting a variable value
function GetStyleVars(Variable = "--color" ) {
  // Get the styles (properties and values) for the root
    var Style = getComputedStyle(StyleVars);
    return(Style.getPropertyValue(Variable));
}
// Create a function for setting a variable value
function ChangeVariableValue(Value,Variable = "--color") {
  // Set the value of variable to another Value
  StyleVars.style.setProperty(Variable, Value);
}


document.getElementById("A").onclick = function(){
ChangeVariableValue('red');
}



document.getElementById("B").onclick = function(){
ChangeVariableValue('green');
}


document.getElementById("C").onclick = function(){
ChangeVariableValue('black');
}


document.getElementById("D").onclick = function(){
alert(GetStyleVars());
}

:root{
 --color : #fff;
}
button{
border :2px solid var(--color);
}

<button id="A">Red</button>
<br>
<button id="B">Green</button>
<br>
<button id="C">Black</button>
<br>
<button id="D">Alert Value</button>

通过javascript访问更少的变量？

4 个答案: