你虚度的今日是昨日逝去的人无限向往的明天。美丽的早晨,把压力释放,清凉的秋风,把欢乐吹响,温柔的阳光,把温馨点亮,轻松的心情,把幸福送上,早安!
一些网站的CSS文件喜欢进行压缩处理以便加快网站的加载速度,由于代码经过了压缩处理缩成一团,肉眼看起来非常的杂乱,就研究了一下利用js脚本来格式化CSS样式代码的方法并制作了一个小工具!
js格式化css样式代码的方法
js代码
<script> var css = 'CSS样式代码'; //输入要格式化的CSS代码 css = css.replace(/\s*([\{\}\:\;\,])\s*/g, "$1"); css = css.replace(/;\s*;/g, ";"); css = css.replace(/\,[\s\.\#\d]*{/g, "{"); css = css.replace(/([^\s])\{([^\s])/g, "$1 {\n\t$2"); css = css.replace(/([^\s])\}([^\n]*)/g, "$1\n}\n$2"); css = css.replace(/([^\s]);([^\s\}])/g, "$1;\n\t$2"); console.log(css); //输出格式化后的CSS代码 </script>
js简单格式化CSS样式代码的小工具
下面是一个简单的格式化CSS代码的web页面小工具,将代码复制到本地保存成html网页运行即可!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script> </head> <body> <textarea id="css" style="width:500px;height: 200px;"></textarea> <button id="yasuo">格式化</button> <script> $('#yasuo').on('click',function(){ $('#css').val(format_css($('#css').val())); }); function format_css(s) { s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1"); s = s.replace(/;\s*;/g, ";"); s = s.replace(/\,[\s\.\#\d]*{/g, "{"); s = s.replace(/([^\s])\{([^\s])/g, "$1 {\n\t$2"); s = s.replace(/([^\s])\}([^\n]*)/g, "$1\n}\n$2"); s = s.replace(/([^\s]);([^\s\}])/g, "$1;\n\t$2"); return s; } </script> </body> </html>
本文javascript格式化CSS样式代码的方法到此结束。在生活我们不是走向成功就是走向失败,不是走向光明就是奔向黑暗,不是飞进天堂就是掉进深渊,获得不了幸福就会感到痛楚。小编再次感谢大家对我们的支持!