8

我有一个包含一些变量的 LESS 文件：

@font-size: 100%;
@label-align: left;
@field-width: 230px;
@icon-size: 16px;
@icon-padding: 8px;

在我的 JS 脚本中，我需要知道用户在 LESS 文件中设置的一些初始值的总和。计算出的 css 值可能会根据父容器大小而变化。这些值也会在首次加载时发生变化，具体取决于窗口大小。

有些元素也是动态创建的，因此很难在 JS 中获取正确的初始值，因为我必须在代码的不同点和不同的范围内声明变量。

我的一个想法是声明一个带有一些虚拟变量的“高范围”对象，并在我将元素附加到 DOM 后立即将值分配给变量，但结果却是混乱和多余的。

几个小时后，我想出了这个目前有效的想法，有点老套但有效。

较少的：

.less-vars {
    width: @field-width + @error-width + @icon-size + (@icon-padding * 2);
}

JS：

var less_vars = $('<div class="less-vars" />').hide().appendTo('body').width();
$('.less-vars').remove();

我还有其他方法可以做到这一点吗？

4

1 回答 1

11

我刚刚编写了一小段 Javascript，它直接从 document.styleSheets 读取它，因此它不需要任何额外的 HTML。我只在 Chrome 中测试过。

在我的少我有：

#less {
    .thumbsWidth { width: @thumbsWidth; }
    .thumbsTop { width: @thumbsTop; }
}

我的 Javascript 内容如下：

var oLess = {};
$.each(document.styleSheets,function(i,sheet){
    $.each(sheet.cssRules,function(i,rule){
        var sRule = rule.cssText;
        if (sRule.substr(0,5)=="#less") {
            var aKey = sRule.match(/\.(\w+)/);
            var aVal = sRule.match(/(\d+)/);
            if (aKey&&aVal) oLess[aKey[1]] = aVal[0]<<0;
        }
    });
});
console.log(oLess);

这使得oLess：

{
    thumbsWidth: 123,
    thumbsTop: 456
}

目前这只读取像素值，但您可以轻松修改它以读取任何内容。

-更新-

这是一个小提琴： http: //jsfiddle.net/Sjeiti/VHQ8x/（资源中的要点https://gist.github.com/2948738）

-很晚的更新-

上面那个在当时还不错。现在你最好使用 CSS 变量和element.style.getPropertyValue("--my-var");. 见这里：https ://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#Values_in_JavaScript

于 2012-06-01T10:19:01.437 回答