rem转换rpx 

<!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>

 

posted @ 2020-06-08 09:55  sure2016  阅读(1054)  评论(0)  编辑  收藏  举报