原生JS怎么进行CSS格式化和压缩
这篇文章主要介绍“原生JS怎么进行CSS格式化和压缩”，在日常操作中，相信很多人在原生JS怎么进行CSS格式化和压缩问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”原生JS怎么进行CSS格式化和压缩”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
成都创新互联是专业的毕节网站建设公司，毕节接单;提供网站设计制作、做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行毕节网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
前言
一直比较喜欢收集网页特效，很多时候都会遇到CSS被压缩过的情况，这时查看起来就会非常不方便，有时为了减少文件大小，也会对自己的CSS进行压缩，网上提供这样服务的很多，但都不尽如人意，因此打算自己动手写一个JS来进行CSS的格式化和压缩
原理
CSS的结构如下：
选择器{css属性声明：值;}
所以对CSS格式化也就比较简单，大致分为以下几步;
1、把多个空格合并成一个，去掉换行
2、对处理后的字符串按"{"进行分组
3、遍历分组，对含有"}"的部分再次以"}"进行分组
4、对分组后的数据进行处理，主要是加上空格和换行
对CSS压缩就比较简单了，把空格合并，去掉换行就可以了
格式化
下面分步对以上步骤进行实现。
初始化：
functionformathtmljscss(source, spaceWidth, formatType) {
this.source = source;
this.spaceStr = " ";
if(!isNaN(spaceWidth)) {
if(spaceWidth >1) {
this.spaceStr = "";
for(vari = 0; i this.spaceStr += " "; } } else{ this.spaceStr = " "; } } this.formatType = formatType; this.output = []; } 这里几个参数分别是要格式化的CSS代码、CSS属性声明前空格宽度，类型(格式化/压缩) 1、把多个空格合并成一个，去掉换行： formathtmljscss.prototype.removeSpace = function() { this.source = this.source.replace(/s+| /g, " ") .replace(/s*{s*/g, "{") .replace(/s*}s*/g, "}") .replace(/s*:s*/g, ":") .replace(/s*;s*/g, ";"); } 2、对处理后的字符串按"{"进行分组 formathtmljscss.prototype.split = function() { varbigqleft = this.source.split("{"); } 3、遍历分组，对含有"}"的部分再次以"}"进行分组 formathtmljscss.prototype.split = function() { varbigqleft = this.source.split("{"); varbigqright; for(vari = 0; i if(bigqleft[i].indexOf("}") != -1) { bigqright = bigqleft[i].split("}"); } else{ } } } 4、对分组后的数据进行处理，主要是加上空格和换行 这里的处理主要分为，把CSS属性声明和值部分取出来，然后加上空格和换行： formathtmljscss.prototype.split = function() { varbigqleft = this.source.split("{"); varbigqright; for(vari = 0; i if(bigqleft[i].indexOf("}") != -1) { bigqright = bigqleft[i].split("}"); varpv = bigqright[0].split(";"); for(varj = 0; j pv[j] = this.formatStatement(this.trim(pv[j]),true); if(pv[j].length >0) { this.output.push(this.spaceStr + pv[j] + "; "); } } this.output.push("} "); bigqright[1] = this.trim(this.formatSelect(bigqright[1])); if(bigqright[1].length >0) { this.output.push(bigqright[1], " { "); } } else{ this.output.push(this.trim(this.formatSelect(bigqleft[i])), " { "); } } } 这里调用了几个方法：trim、formatSelect、formatStatement，下面一一说明。 trim：从命名就可以看出是去除首尾空格; formathtmljscss.prototype.trim = function(str) { returnstr.replace(/(^s*)|(s*$)/g, ""); } formatSelect：是处理选择器部分语法，做法就是给"."前面加上空格，把","前后的空格去掉，把多个空格合并为一个: formathtmljscss.prototype.formatSelect = function(str) { returnstr.replace(/./g, " .") .replace(/s+/g, " ") .replace(/. /g, ".") .replace(/s*,s*/g, ","); } formatStatement：是处理“css属性声明：值;”部分的语法，做法就是给":"后面加上空格，把多个空格合并为一个，去掉“#”后面的空格，去掉"px"前面的空格，去掉"-"两边的空格，去掉":"前面的空格: formathtmljscss.prototype.formatStatement = function(str, autoCorrect) { str = str.replace(/:/g, " : ") .replace(/s+/g, " ") .replace("# ", "#") .replace(/s*px/ig, "px") .replace(/s*-s*/g, "-") .replace(/s*:/g, ":"); returnstr; } 调用 调用部分比较简单，对于格式化来说就是去掉空格和换行，然后分组处理，对于压缩来说就是去掉空格和换行： formathtmljscss.prototype.formatcss = function() { if(this.formatType == "compress") { this.removeSpace(); } else{ this.removeSpace(); this.split(); this.source = this.output.join(""); } } 界面HTML代码： View Code 跟页面元素按钮绑定事件: View Code window.onload = function() { varsubmitBtn = document.getElementById("submit"); vartabsize = document.getElementById("tabsize"); varsourceCon = document.getElementById("source"); varsize = 4; varformatType = "format"; submitBtn.onclick = function() { varradios = document.getElementsByName("format_type"); for(i = 0; i if(radios[i].checked) { formatType = radios[i].value; break; } } varformat = newformathtmljscss(sourceCon.value, size, formatType); format.formatcss(); sourceCon.value = format.source; } tabsize.onchange = function() { size = this.options[this.options.selectedIndex].value; submitBtn.click(); returnfalse; } } 到此，关于“原生JS怎么进行CSS格式化和压缩”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
网站名称：原生JS怎么进行CSS格式化和压缩
网站地址：http://shouzuofang.com/article/gppcgj.html