实现原理：
对样式进行格式化，然后根据 “rem” 进行拆分，这样就会拆分成一个数组 [str1,str2,str3...,str6],
除了最后一个元素，前边的元素都会以 “rem” 样式的数值结尾，
然后在对数组中的元素字符串进行再次根据 “：” 进行拆分，这样就把原rem样式的数字给提取出来了，然后就根据规则转换成rpx的数值，重新组合就好了。
css格式化工具：https://tool.lu/css/
源码:
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title></title>
-
<style>
-
div#newCss{
-
border:1px solid #999;
-
width:504px;
-
height:140px;
-
}
-
</style>
-
</head>
-
<body>
-
<script type="text/javascript">
-
function rem2rpx() {
-
var oldCss = document.getElementById("css").value.trim(); //".similar_recommend .title{margin:.3rem 0 0;padding-top:.4rem;color:#666;font-size:.28rem;}"
-
//对原样式根据rem进行拆分成数组，这样除了最后一个元素，数组前边的几个元素都是以原rem样式数值结尾
-
//拆分后的格式：[".similar_recommend{background:#fff;border-radius:.1", ";height:7.4", ";margin-top:-.3", "}"]
-
var newCssArr = oldCss.split("rem")
-
var newCss = "" //转换后新的样式变量
-
for(var i in newCssArr) {
-
if(i < newCssArr.length - 1) {
-
//非最后一个元素，对字符串按照:再次拆分，把rem样式的数值分离出来进行转换
-
var str = newCssArr[i]
-
var idx = str.lastIndexOf(':')
-
var prevStr = str.substring(0, idx + 1)
-
var nextStr = ""//nextStr格式为 -.3 , -3 , 3 , .3
-
if(str.indexOf('-.')>-1){
-
//nextStr格式为-.3rem或-3rem
-
nextStr = str.substring(str.indexOf(':-')+2, str.length)
-
//nextStr格式为.3rem或3rem
-
if(nextStr.indexOf('.')>-1){
-
nextStr ="0"+ nextStr
-
}
-
nextStr = "-"+parseInt(nextStr * 100) + "rpx"
-
}else{
-
nextStr = str.substring(idx + 1, str.length)
-
nextStr = nextStr.indexOf('.') > -1 ? "0" + nextStr : nextStr
-
nextStr = parseInt(nextStr * 100) + "rpx"
-
}
-
-
//重组数组内的样式字符串
-
newCss += prevStr + "" + nextStr
-
}else{
-
//追加最后一个数组元素
-
newCss+=newCssArr[i]
-
}
-
}
-
document.getElementById("newCss").innerHTML=newCss
-
}
-
</script>
-
<h4>rem样式</h4>
-
<textarea id="css" cols="60" rows="10"></textarea>
-
<br />
-
<input type="button" value="rem转换rpx" onclick="rem2rpx()" />
-
<h4>转换后的样式</h4>
-
<div id="newCss"></div>
-
</body>
-
</html>
|
