實現(xiàn)原理：
對樣式進行格式化，然后根據(jù) “rem” 進行拆分，這樣就會拆分成一個數(shù)組 [str1,str2,str3...,str6],
除了最后一個元素，前邊的元素都會以 “rem” 樣式的數(shù)值結尾，
然后在對數(shù)組中的元素字符串進行再次根據(jù) “：” 進行拆分，這樣就把原rem樣式的數(shù)字給提取出來了，然后就根據(jù)規(guī)則轉(zhuǎn)換成rpx的數(shù)值，重新組合就好了。
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;}"
-
//對原樣式根據(jù)rem進行拆分成數(shù)組，這樣除了最后一個元素，數(shù)組前邊的幾個元素都是以原rem樣式數(shù)值結尾
-
//拆分后的格式：[".similar_recommend{background:#fff;border-radius:.1", ";height:7.4", ";margin-top:-.3", "}"]
-
var newCssArr = oldCss.split("rem")
-
var newCss = "" //轉(zhuǎn)換后新的樣式變量
-
for(var i in newCssArr) {
-
if(i < newCssArr.length - 1) {
-
//非最后一個元素，對字符串按照:再次拆分，把rem樣式的數(shù)值分離出來進行轉(zhuǎn)換
-
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"
-
}
-
-
//重組數(shù)組內(nèi)的樣式字符串
-
newCss += prevStr + "" + nextStr
-
}else{
-
//追加最后一個數(shù)組元素
-
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轉(zhuǎn)換rpx" onclick="rem2rpx()" />
-
<h4>轉(zhuǎn)換后的樣式</h4>
-
<div id="newCss"></div>
-
</body>
-
</html>
|
