CSS格式化工具-直接可以使用

浅浅的花香味﹌ 2022-07-24 13:04 144阅读 0赞

<!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="" οnsubmit="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" οnclick="$('codeText').value=code.A();">压缩代码</button>
    	<button type="button" οnclick="$('codeText').value=code.B();">格式(多行)</button>
    	<button type="button" οnclick="$('codeText').value=code.C();">格式(单行)</button>
    	<button type="button" οnclick="$('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.οnkeydοwn=function(){
    		my.codeZ="";	
    	}
    }
    var code=new codeZip($('codeText'));
    </script>
    
    
    </body></html>

![Center][] ![Center 1][]

[Center]: https://img-blog.csdn.net/20160509160916468?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220724/b05cd284939e416d889cc70b6be75d93.png