6

少し背景から始めます。

だから私がやろうとしているのは、要素から「スタイル」属性を取得することです.最終的な計画は、それをテキストボックスに出力することです(スタイリングは動的です)。これにより、計算されたスタイルのみを取得しているため、いくつかの css プレフィックスを作成しています。

それで、ここに見られるように、一連のcssプロパティを持つ変数があります:

compcss = {
                'font-size': fsize,
                'padding': tpadd,

                '-webkit-border-radius': brad,
                '-moz-border-radius': brad,
                '-o-border-radius': brad,
                '-ms-border-radius': brad,
                'border-radius': brad,

                'background': bground,
                'background-m': bgmoz,
                'background-o': bgop,
                'background-i': bgie,
                'color': 'white',
                'text-shadow': '0 -1px 0 rgba(0, 0, 0, 0.25)',
                'text-decoration': 'none',
                'border': '1px solid rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)',

            };

通常、fsize、tpadd、brad、および bground は

document.defaultView.getComputedStyle(cssStr[0], "")[style]

しかし、次の jsbin では静的な数値を入力しました。

[object Object]これは、ログに記録されたとき、またはテキスト ボックスに入力されたときと同じように返されますが、これは予期されることです。ただし、このオブジェクトを次の形式の文字列として出力したいと考えています。

font-size: Xpx;
padding: Ypx;
-webkit-border-radius: Zpx;

など、JSON.stringify(compcss) を試してみましたが、次のように返されます。

"font-fize":"Xpx","padding":"Ypx","-webkit-border-radius":"Zpx"

どこまでも。

これを希望どおりに出力するための最良の方法は何ですか? 何か明確にする必要がある場合はお知らせください。これについてもっと良い方法はありますか？

たとえば、ここに jsbin があります: http://jsbin.com/opiwuy/2/edit

Vanilla Javascript と JQuery はどちらも問題ありません。

ありがとう！

4

3 に答える 3

6 
  var value = '';
  $.each(compcss, function(key, val) {
    value += key + ' : ' + val + ';' +'\n';
  });
  $('#css').val(value);

デモ

あなたもできる

$('#css').val(function() {
    var value = '';
    $.each(compcss, function(key, val) {
      value += key + ' : ' + val + ';' + '\n';
    });
    return value;
});

デモ

于 2012-06-01T17:59:02.187 に答える
2

このようなものがおそらくあなたのニーズに合うでしょう:

function cssStringify(myObject) {
    var result = "";
    var stringObjs = JSON.stringify(myObject).split(",");
    $.each(stringObjs, function(val) {
        var pair = val.split(":");
        result = result + pair[0] + ":" + pair[1] + ";\n";
    });
    return result;
}
于 2012-06-01T18:04:35.400 に答える
2

私のバージョンを捨てるだけです.replace

var xx = JSON.stringify(compcss); 
$('#csjson').val(
    xx.replace(/":"|":/g, ":")
      .replace(/,"/g, "\n")
      .replace(/"/g, ""));

デモ: http://jsbin.com/opiwuy/4

于 2012-06-01T18:12:57.540 に答える