http://runjs.cn/detail/ivvnjewe 要写单位,设置font-size那里要提交 <!DOCTYPE html> <html lang="en" style="font-size:10px;"> <head> <meta charset="UTF-8"> <title>px转换rem</title> </head> <body style="background:#ccc;"> <h1>px转换成rem</h1> <span style="color:red;line-height:30px;">注：如果没有设置html的font-size，可以自行设置</span> <div style="overflow:hidden;"> <textarea name="" id="text" cols="30" rows="10" style="float:left;border:5px solid #696262;width:500px;height:500px;"></textarea> <div style="line-height:500px;height:500px;float:left; width:80px; text-align:center;font-size:20px;">转换</div> <div id="result" style="border:5px solid #696262;width:500px;height:500px;float:left; overflow:scroll;background:#fff;"></div> </div> <div style="padding-top:20px; font-size:20px;"> 设置font-size: <input type="text" id="sizeText" value="20"> <button id="go">提交</button> </div> <script> var a,result,size, text; var html = document.getElementsByTagName('html')[0]; if(html.style.fontSize.length < 1){ size = 20; } else { size = parseInt(html.style.fontSize); } var $ = function(id) { return document.getElementById(id); } function textChange() { result = $("text").value.replace(/(\d+)(\s*)px/g, function($1){ console.log($1); $1.replace(/\d+/, function($2) { a = $2/size + "rem"; }) return a; }) $("result").innerHTML = result; text = $("result").innerHTML; text = text.replace(/(\w*\:)|(\})/g, function($1) { if($1 == "\}") { return "<br><span style='padding:0px;'></span>" + $1 + "<br />"; } else { return "<br><span style='padding:0 10px;'></span>" + $1; } }) text = text.replace(/(\/\*)|(\*\/)/g, function($1) { if($1 == "\/*"){ return "<br />" + $1; } else { return $1 + "<br />"; }; }) $("result").innerHTML = text; } $("text").onkeyup = function() { textChange(); } $("go").onclick = function() { size = $("sizeText").value; textChange(); } </script> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » px转换rem 喜欢 (1)or分享 (0)
