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;
     }
  }
})

<强>演示

＆＃13;

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);

＆＃13;

（padding，margin，background-color等属性需要更具体的逻辑。

Answer 2

使用CSS缩放。

.zoom {
  zoom: 120%;
}

手动调整大小css属性

2 个答案: