CSS代码格式化工具
2015-09-23 10:49
681 查看
CSS代码格式化工具
css代码格式化工具可以:压缩代码,格式(多行),格式(单行),还原代码。
便于优化,节省空间
以下为源码:
-------------------------------------
css代码格式化工具可以:压缩代码,格式(多行),格式(单行),还原代码。
便于优化,节省空间
以下为源码:
-------------------------------------
<!DOCTYPE html > <html> <head> <meta charset="UTF-8"> <title>css格式化工具</title> <style type="text/css"> html,body,form,fieldset,textarea { height:100%; margin:0; padding:0; border:0; font-size:10pt; background:#eee; } form { margin:0 1%; overflow:hidden; } legend { line-height:3em; font-weight:bolder; } button { float:left; margin:1% 1% 0 0; cursor:pointer; } textarea { width:100%; height:20em; border:1px solid #ccc; display:block; background:#fff; } </style> </head><body> <form action="" onsubmit="return false"> <fieldset> <legend>css格式化工具</legend> <textarea name="" rows="" cols="" id="codeText">body * { font-size:10pt; }/* ss sda */ p { clear:left; padding:5px 10px; } td , fieldset {padding: 10px; } textarea { width:90%; height:10em; } </textarea> <button type="button" onclick="$('codeText').value=code.A();">压缩代码</button> <button type="button" onclick="$('codeText').value=code.B();">格式(多行)</button> <button type="button" onclick="$('codeText').value=code.C();">格式(单行)</button> <button type="button" onclick="$('codeText').value=code.Z();">还原代码</button> </fieldset> </form> <script type="text/javascript"> function $(id){return document.getElementById(id);} function codeZip(obj){ this.S=function(){ var code=obj.value; if(!this.codeZ||this.codeZ=="")this.codeZ=code; code=code.replace(/(\n|\t|\s)*/ig,'$1'); code=code.replace(/\n|\t|\s(\{|\}|\,|\:|\;)/ig,'$1'); code=code.replace(/(\{|\}|\,|\:|\;)\s/ig,'$1'); return code; } this.A=function(){ var code=this.S(); return code; } this.B=function(){ var code=this.S(); code=code.replace(/(\{)/ig,' $1'); code=code.replace(/(\{|\;)/ig,'$1\n\t'); code=code.replace(/\t*(\})/ig,'$1\n'); code=code.replace(/(\*\/)/ig,'$1\n'); return code; } this.C=function(){ var code=this.S(); code=code.replace(/(\})/ig,'$1\n'); code=code.replace(/(\*\/)/ig,'$1\n'); return code; } this.Z=function(){ return (this.codeZ)?this.codeZ:obj.value; } var my=this; obj.onkeydown=function(){ my.codeZ=""; } } var code=new codeZip($('codeText')); </script> </body> </html>
相关文章推荐
- CSS代码格式化和压缩的方法与技巧
- CSS IE6/7/8, Firefox, Safari, Chrome, Opera Hack使用简要归纳(转)
- sublime Text2 必备插件(SASS SCSS)
- 纯CSS实现Tab切换标签效果代码
- CSS媒体查询器
- CSS3 transition实现超酷图片墙动画效果
- css3中-moz、-ms、-webkit 是什么意思
- border的妙用:纯CSS绘制三角形
- css3动画图片变形,自定义字体
- JS+CSS实现经典的左侧竖向滑动菜单效果
- css
- CSS3 圆角(border-radius)详解
- Sublime Text 2的CSS单行格式化与压缩
- 第三课:CSS
- CSS之SASS
- 浅谈datagrid详细操作单元格样式
- 每天一个css 伪类
- css的优先级
- 【CSS】CSS HTML 常用命名单词
- Css3帧动画深入探寻,讲点项目中实际会碰到的问题