我将从一点背景开始。
所以我要做的是从元素中获取“style”属性,最终的计划是将其输出到文本框(样式是动态的)。有了这个,我正在创建一些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都很好。
谢谢!
答案 0 :(得分:5)
var value = '';
$.each(compcss, function(key, val) {
value += key + ' : ' + val + ';' +'\n';
});
$('#css').val(value);
<强> DEMO 强>
您也可以
$('#css').val(function() {
var value = '';
$.each(compcss, function(key, val) {
value += key + ' : ' + val + ';' + '\n';
});
return value;
});
<强> DEMO 强>
答案 1 :(得分: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;
}
答案 2 :(得分:2)
使用.replace
var xx = JSON.stringify(compcss);
$('#csjson').val(
xx.replace(/":"|":/g, ":")
.replace(/,"/g, "\n")
.replace(/"/g, ""));