javascript - 手动调整CSS属性大小

Question

这个想法是调整已经在 css 中完成的 css 定义的大小。 css js 对象如下所示:

style: {
    textAlign: "left",
    fontWeight: "bold",
    fontSize: "1.0em",
    lineHeight: "12px",
    fontFamily: "@{fontFamily}",
    color: "@{textColor}",
    margin: "0 10px 0 10px",
    padding: "7px 0 7px 0",
    borderBottom: "1px solid rgba(0, 0, 0, 0.06)",
    width: "auto",
    height: "30px",
},

现在我想将所有这些缩放 20% (30px -> 36px, 10px -> 12px, 1.0em -> 1.2em...) 。最明智、最可靠的方法是什么？

Answer 1

以下解决方案适用于 1.0em、30px(数字后跟非数字值)等值

Object.keys(styles).forEach( s => {
  if( !isNaN(parseInt(styles[s])) )
  {
     var nonNumericVal = [...(styles[s].match(/[^\d\.]/g, "")|| []) ].join("");
     var numValue = styles[s].replace( nonNumericVal, "");
     if ( !isNaN( numValue ) )
     {
        styles[s] = numValue * 120/100 + nonNumericVal;
     }
  }
})

演示

var styles = {
  textAlign: "left",
  fontWeight: "bold",
  fontSize: "1.0em",
  lineHeight: "12px",
  fontFamily: "@{fontFamily}",
  color: "@{textColor}",
  margin: "0 10px 0 10px",
  padding: "7px 0 7px 0",
  borderBottom: "1px solid rgba(0, 0, 0, 0.06)",
  width: "auto",
  height: "30px",
};

Object.keys(styles).forEach(s => {
  if (!isNaN(parseInt(styles[s]))) {
    var nonNumericVal = [...(styles[s].match(/[^\d\.]/g, "") || [])].join("");
    var numValue = styles[s].replace(nonNumericVal, "");
    if (!isNaN(numValue)) {
      styles[s] = numValue * 120 / 100 + nonNumericVal;
    }
  }
});

console.log(styles);

诸如(padding、margin、background-color等)的属性将需要更具体的逻辑。