jQuery，将CSS类转换为对象

Question

我正在尝试将普通的 css 标记转换为对象:

.btn {
  border-radius: 28px;
  padding: 10px 20px 10px 20px;
  border:1px solid #000;
}

所以就变成了

var btn = {
  "border-radius": "28px",
  "padding": "10px 20px 10px 20px",
  "border":"1px solid #000",
};

然后我可以将它与 jquery css 函数一起使用来设置其他元素的样式

$(".el").css(btn);

我尝试过使用 JSON.parse() 和 JSON.stringify()，但没有成功。

Answer 1

你为什么不简单地这样做:

$(".el").addClass("btn");

如果您想继续采用您建议的方法，那么您可以执行以下操作:

var btn = `{
  border-radius: 28px;
  padding: 10px 20px 10px 20px;
  border:1px solid #000;
}`;

formattedBtn = btn.split("\n");
/* Remove first element and last element as they are 
{ and } */
formattedBtn.pop();
formattedBtn.shift();

var obj = {};
formattedBtn.forEach(
  (el) => {
    let proerty = el.split(":");
    obj[proerty[0].trim()] = proerty[1].trim().replace(/;/g, "");
  }
)

console.log(obj);

$(function(){
  $("#but").css(obj);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="but">My Button</button>