saber酱的抱枕

努力变强

09/19
09:40
学习

JavaScript 转换 CSS 里的长度单位

CSS 的常用长度单位有 px、em、rem、pt 等。今天我遇到一个情况,有两个网站都使用了 rem 作为单位,但是根元素(html)的字号并不相同,需要进行转换。

移植页面的根元素字号是 20px,CSS 规则如:
height: 4rem;

我的根元素字号是 100px,需要除以 5,改成:
height: 0.8rem;

因为需要修改的地方很多,所以我写了个正则来处理。本文的代码并不是一个通用的工具,只是提供了解决思路。

这次的情况是同一种单位之间的转换,有时候我们可能需要进行不同单位之间的转换,思路都是一样的,根据需要修改代码即可。

示例代码:

let str=`
.conta {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.bt01 {
  height: 4rem;
  line-height: 4rem;
  background: #b50d0a;
  color: #fff;
  text-align: center;
  font-size: 1.6rem;
}

.bt02 {
  height: 5rem;
  padding-top: 1rem;
  line-height: 2rem;
  background: #b50d0a;
  color: #fff;
  text-align: center;
  font-size: 1.6rem;
}
`;
let reg1=/\d.*?(?=rem)/g;
str.replace(reg1,(num)=>{
	console.log(num);
	return num/5;
});

流程说明:
1.把需要修改的 CSS 样式包裹在模板字符串里;
2.编写正则,如示例中的正则是匹配所有 rem 前面的数字;
3.用字符串的 replace 方法,对每个匹配的值进行处理和替换。

如何拓展使用呢,比如要转换的单位不是 rem,修改正则里的 rem 即可。

如果需要进行不同单位之间的转换,那么匹配时不止要匹配数字,还要匹配单位。需要把正则里的 ?= 去掉,replace 里的处理流程也要加上单位的变化。


注意事项:
使用时需要先把 CSS 代码格式化,像上面的代码那样,一个规则一行。否则可能导致正则的匹配结果出错,下面这个就会出错:

background: #b50d0a;font-size: 1.6rem;

也可能会有其他一些小概率情况导致出错,保险起见,转换后查找一下结果里是否含有“NaN”比较好。

JavaScript 转换 CSS 里的长度单位