這篇文章主要介紹“原生JS怎么進(jìn)行CSS格式化和壓縮”，在日常操作中，相信很多人在原生JS怎么進(jìn)行CSS格式化和壓縮問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”原生JS怎么進(jìn)行CSS格式化和壓縮”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)是專業(yè)的畢節(jié)網(wǎng)站建設(shè)公司，畢節(jié)接單;提供網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行畢節(jié)網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

前言

一直比較喜歡收集網(wǎng)頁(yè)特效，很多時(shí)候都會(huì)遇到CSS被壓縮過(guò)的情況，這時(shí)查看起來(lái)就會(huì)非常不方便，有時(shí)為了減少文件大小，也會(huì)對(duì)自己的CSS進(jìn)行壓縮，網(wǎng)上提供這樣服務(wù)的很多，但都不盡如人意，因此打算自己動(dòng)手寫(xiě)一個(gè)JS來(lái)進(jìn)行CSS的格式化和壓縮

原理

CSS的結(jié)構(gòu)如下：

選擇器{css屬性聲明：值;}

所以對(duì)CSS格式化也就比較簡(jiǎn)單，大致分為以下幾步;

1、把多個(gè)空格合并成一個(gè)，去掉換行

2、對(duì)處理后的字符串按"{"進(jìn)行分組

3、遍歷分組，對(duì)含有"}"的部分再次以"}"進(jìn)行分組

4、對(duì)分組后的數(shù)據(jù)進(jìn)行處理，主要是加上空格和換行

對(duì)CSS壓縮就比較簡(jiǎn)單了，把空格合并，去掉換行就可以了

格式化

下面分步對(duì)以上步驟進(jìn)行實(shí)現(xiàn)。

初始化：

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 = [];

}

這里幾個(gè)參數(shù)分別是要格式化的CSS代碼、CSS屬性聲明前空格寬度，類型(格式化/壓縮)

1、把多個(gè)空格合并成一個(gè)，去掉換行：

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、對(duì)處理后的字符串按"{"進(jìn)行分組

formathtmljscss.prototype.split = function() {

varbigqleft = this.source.split("{");

}

3、遍歷分組，對(duì)含有"}"的部分再次以"}"進(jìn)行分組

formathtmljscss.prototype.split = function() {

varbigqleft = this.source.split("{");

varbigqright;

for(vari = 0; i

if(bigqleft[i].indexOf("}") != -1) {

bigqright = bigqleft[i].split("}");

}

else{

}

}

}

4、對(duì)分組后的數(shù)據(jù)進(jìn)行處理，主要是加上空格和換行

這里的處理主要分為，把CSS屬性聲明和值部分取出來(lái)，然后加上空格和換行：

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])), " { ");

}

}

}

這里調(diào)用了幾個(gè)方法：trim、formatSelect、formatStatement，下面一一說(shuō)明。

trim：從命名就可以看出是去除首尾空格;

formathtmljscss.prototype.trim = function(str) {

returnstr.replace(/(^s*)|(s*$)/g, "");

}

formatSelect：是處理選擇器部分語(yǔ)法，做法就是給"."前面加上空格，把","前后的空格去掉，把多個(gè)空格合并為一個(gè):

formathtmljscss.prototype.formatSelect = function(str) {

returnstr.replace(/./g, " .")

.replace(/s+/g, " ")

.replace(/. /g, ".")

.replace(/s*,s*/g, ",");

}

formatStatement：是處理“css屬性聲明：值;”部分的語(yǔ)法，做法就是給":"后面加上空格，把多個(gè)空格合并為一個(gè)，去掉“#”后面的空格，去掉"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;

}

調(diào)用

調(diào)用部分比較簡(jiǎn)單，對(duì)于格式化來(lái)說(shuō)就是去掉空格和換行，然后分組處理，對(duì)于壓縮來(lái)說(shuō)就是去掉空格和換行：

formathtmljscss.prototype.formatcss = function() {

if(this.formatType == "compress") {

this.removeSpace();

}

else{

this.removeSpace();

this.split();

this.source = this.output.join("");

}

}

界面HTML代碼：

View Code

跟頁(yè)面元素按鈕綁定事件:

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;

}

}

到此，關(guān)于“原生JS怎么進(jìn)行CSS格式化和壓縮”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！