CSS横竖排格式化工具

chen'mo

2014-11-13 / 0 评论 / 2,297 阅读 / 正在检测是否收录...

11/13

温馨提示：

本文最后更新于1970年01月01日，已超过19838天没有更新，若内容或图片失效，请留言反馈。

每次扒皮，发现好多CSS代码是横写着的，可我喜欢竖着看，发现网上有这样的工具，赶紧收集一份先。

演示地址：https://cmsblog.cn/pp/css.html

源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css横排竖排工具</title>

<style>
.toolarea {width:800px;height:300px;outline:none;padding:10px;border:5px solid #ddd;}
.bt {width:150px;height:40px;}
</style>
</head>

<body>
<!-- /工具开始 -->
<script language=JavaScript> 
<!-- 
function $() { 
	var elements = new Array(); 
	for (var i = 0; i < arguments.length; i++) { 
		var element = arguments[i]; 
		if (typeof element == 'string') 
		element = document.getElementById(element); 
		if (arguments.length == 1)  
		return element;    
		elements.push(element); 
	}    
	return elements; 
}  
	
function CSSencode(code){ 
	code = code.replace(/\r\n/ig,''); 
	code = code.replace(/(\s){2,}/ig,'$1'); 
	code = code.replace(/\t/ig,''); 
	code = code.replace(/\n\}/ig,'\}'); 
	code = code.replace(/\n\{\s*/ig,'\{'); 
	code = code.replace(/(\S)\s*\}/ig,'$1\}'); 
	code = code.replace(/(\S)\s*\{/ig,'$1\{'); 
	code = code.replace(/\{\s*(\S)/ig,'\{$1'); 
	return code; 
} 

function CSSdecode(code){ 
	code = code.replace(/(\s){2,}/ig,'$1'); 
	code = code.replace(/(\S)\s*\{/ig,'$1 {'); 
	code = code.replace(/\*\/(.[^\}\{]*)}/ig,'\*\/\n$1}'); 
	code = code.replace(/\/\*/ig,'\n\/\*'); 
	code = code.replace(/;\s*(\S)/ig,';\n\t$1'); 
	code = code.replace(/\}\s*(\S)/ig,'\}\n$1'); 
	code = code.replace(/\n\s*\}/ig,'\n\}'); 
	code = code.replace(/\{\s*(\S)/ig,'\{\n\t$1'); 
	code = code.replace(/(\S)\s*\*\//ig,'$1\*\/'); 
	code = code.replace(/\*\/\s*([^\}\{]\S)/ig,'\*\/\n\t$1'); 
	code = code.replace(/(\S)\}/ig,'$1\n\}'); 
	code = code.replace(/(\n){2,}/ig,'\n'); 
	code = code.replace(/:/ig,':'); 
	code = code.replace(/  /ig,' '); 
	return code; 
} 
//--> 
</script>
  
<div style="width:820px;margin:0 auto;">
	<h3>css格式化工具</h3>
	<textarea class="toolarea" id="code"></textarea><br/><br/>
	<input class="bt lvse" onclick="$('code').value = CSSencode($('code').value);" value="横排" type="button" />
	<input class="bt lanse" onclick="$('code').value = CSSdecode($('code').value);" value="竖排" type="button" />
</div>

</body>
</html>