你虚度的今日是昨日逝去的人无限向往的明天。美丽的早晨,把压力释放,清凉的秋风,把欢乐吹响,温柔的阳光,把温馨点亮,轻松的心情,把幸福送上,早安!
一些网站的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样式代码的方法到此结束。在生活我们不是走向成功就是走向失败,不是走向光明就是奔向黑暗,不是飞进天堂就是掉进深渊,获得不了幸福就会感到痛楚。小编再次感谢大家对我们的支持!




