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 回答