如何在javascript中进行CSS单元计算并保留CSS单元

How do you do CSS unit math in javascript and retain the CSS unit?

本文关键字：单元 CSS 计算 保留 javascript      更新时间：2023-09-26

我有一个变量，半径设置为"20%"。在我的代码中，我想将高度设置为半径的两倍，如-

height = radius * 2;

我希望它能工作，无论半径是20%、20px、20em还是20vw，结果分别是40%、40px、40em还是40vw。

（我正在使用Reactjs并可以访问Radium）

您可以用parseFloat解析出数字，字符串的其余部分是单位：

var value = "123px";
var n = parseFloat(value);
var u = value.trim().substring(n.toString().length);
console.log("number:", n, "units:", u, "value:", n + u);
// Output: number: 123 units: px value: 123px

或者您可以使用regex（感谢评论中的brendagibson）：

var value = "123px";
var matched = value.match(/('d+)([^'d]*)$/);
var num = matched[1], unit = matched[2];

使用析构函数数组赋值：

let [all, num, unit] = value.match(/('d+)([^'d]*)$/);

或者，您可以使用众多JS库中的一个来为自己做这件事。

相关文章：