微信小程序開發-rem轉換rpx小工具

時間 2020-04-27

標籤微信程序開發 rem 轉換 rpx 工具简体版

原文原文鏈接

實現原理：javascript

對樣式進行格式化，而後根據「rem」進行拆分，這樣就會拆分紅一個數組 [str1,str2,str3...,str6],css

除了最後一個元素，前邊的元素都會以「rem」樣式的數值結尾，html

而後在對數組中的元素字符串進行再次根據「：」進行拆分，這樣就把原rem樣式的數字給提取出來了，而後就根據規則轉換成rpx的數值，從新組合就行了。java

css格式化工具：https://tool.lu/css/jquery

源碼:數組

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../layui/jquery-3.2.1.min.js"></script>
        <style> div#newCss { border: 1px solid #999; width: 504px; height: 140px;
            }
        </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>
        <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") 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="1px .2"的狀況
                            var index = nextStr.indexOf(' ') if(index >= 0) { let str1 = nextStr.substring(0, index) let str2 = nextStr.substring(index + 1, nextStr.length) 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").innerHTML = newCss } $("#bbb").keydown(function(event) { if(event.which == 13) { console.log("ok") } }); </script>
    </body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。