资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

原生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代码:

原生JS怎么进行CSS格式化和压缩

原生JS怎么进行CSS格式化和压缩

View Code

CSS格式化/压缩


缩进:


类型:

跟页面元素按钮绑定事件:

原生JS怎么进行CSS格式化和压缩

原生JS怎么进行CSS格式化和压缩

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格式化和压缩
URL分享:http://cdkjz.cn/article/gppcgj.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220