8

いくつかの変数を持つLESSファイルがあります：

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

私の JS スクリプトでは、ユーザーが LESS ファイルに設定したいくつかの初期値の合計を知る必要があります。計算された css 値は、親コンテナーのサイズによって変わる場合があります。これらの値は、ウィンドウ サイズに応じて、最初の読み込み時にも変化します。

一部の要素も動的に作成されるため、JS で正しい初期値を取得するのが非常に難しくなります。これは、コード内のさまざまなポイントとさまざまなスコープで変数を宣言する必要があるためです。

私が持っていた 1 つのアイデアは、いくつかのダミー変数を使用して「高スコープ」オブジェクトを宣言し、要素を 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

これを document.styleSheets から直接読み取る小さな Javascript を作成したので、余分な 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 に答える