标签：转换 3rem indexOf rpx rem item nextStr str str2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<style>
#newCss {
border: 1px solid #999;
/*width: 504px;*/
/*height: 140px;*/
width: 100%;
display: block;
}
.safeCenter{padding: 0 .3rem;}
.safeCenter{padding: .3rem .3rem .3rem .3rem;}
</style>
</head>
<body>
<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> -->
<textarea id="newCss" rows="100"></textarea>
<input id="aaa">
<input id="bbb">
<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")
console.log(newCssArr)
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
let tndex = str.indexOf(':-')
if(tndex==-1){
tndex = str.indexOf(': -')
}
nextStr = str.substring(tndex+ 2, str.length)
//nextStr格式为.3rem或3rem
console.log('nextStr11',nextStr)
// if(nextStr.indexOf('.') > -1) {
// nextStr = "0" + nextStr
// }
nextStr = parseInt(nextStr * 100) + "rpx"
}else {
nextStr = str.substring(idx + 1, str.length)
//处理 nextStr="1px .2"的情况
var index = nextStr.indexOf(' ')
console.log(index)
if(index >= 0) {
let arrt=nextStr.split(' ');
console.log(arrt)
let strt = ''
arrt.forEach(item=>{
if(item){
if(item.indexOf('px')==-1){
item = item.indexOf('.') > -1 ? "0" + item : item
console.log(item)
console.log('strt',strt)
strt = strt+' '+parseInt(item * 100) + "rpx"
}else{
strt = strt+' '+item;
}
}
})
nextStr = strt;
// let str1 = nextStr.substring(0, index)
// let str2 = nextStr.substring(index + 1, nextStr.length)
// if(str2.indexOf(' ')>-1){
// let arr = str2.split(' ');
// str1 = 0
// // str2 = arr[1];
// }
// console.log('str2',str2)
// str2 = str2.indexOf('.') > -1 ? "0" + str2 : str2
// str2 = parseInt(str2 * 100) + "rpx"
// nextStr = str1 + ' ' + str2
} else {
nextStr = nextStr.indexOf('.') > -1 ? "0" + nextStr : nextStr
nextStr = parseInt(nextStr * 100) + "rpx"
}
}
//重组数组内的样式字符串
newCss += prevStr + "" + nextStr
} else {
//追加最后一个数组元素
newCss += newCssArr[i]
}
}
document.getElementById("newCss").value = newCss
}
$("#bbb").keydown(function(event) {
if(event.which == 13) {
console.log("ok")
}
});
</script>
</body>
</html>
标签：转换,3rem,indexOf,rpx,rem,item,nextStr,str,str2 来源： https://www.cnblogs.com/sure2016/p/13063922.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。