返回顶部
首页 > 资讯 > 前端开发 > VUE >原生JS怎么进行CSS格式化和压缩
  • 463
分享到

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

2024-04-02 19:04:59 463人浏览 独家记忆
摘要

这篇文章主要介绍“原生js怎么进行CSS格式化和压缩”,在日常操作中,相信很多人在原生JS怎么进行CSS格式化和压缩问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”原生JS怎么

这篇文章主要介绍“原生js怎么进行CSS格式化和压缩”,在日常操作中,相信很多人在原生JS怎么进行CSS格式化和压缩问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”原生JS怎么进行CSS格式化和压缩”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

前言

一直比较喜欢收集网页特效,很多时候都会遇到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 <spaceWidth; 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 <bigqleft.length; 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 <bigqleft.length; i++) {

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

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

varpv = bigqright[0].split(";");

for(varj = 0; j <pv.length; 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

<div id="content">

<div class="container">

<div class="box">

<div class="main">

<h3>CSS格式化/压缩</h3>

<div id="blurb">

<fieldset id="options">

<button id="submit">

<span>格式化 / 压缩  <img alt="格式化"src="/images/29.png"/></span>

</button><br/>

<span>缩进:</span>

<ul>

<li>

<select name="tabsize"id="tabsize">

<option value="1">tab键缩进</option>

<option value="2">2空格缩进</option>

<option selected="selected"value="4">4空格缩进</option>

</select>

</li>

</ul><br />

<span>类型:</span><br />

<input type="radio"name="format_type"value="format"checked="checked"id="format_format"/><label for="format_format">格式化</label>

<input type="radio"name="format_type"value="compress"id="format_compress"/><label for="format_compress">压缩</label>

</fieldset>

</div>

<div id="beauty">

<fieldset id="textarea-wrap">

<textarea rows="20"cols="40"id="source"></textarea>

</fieldset>

</div>

</div>

</div>

</div>

</div>

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

原生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 <radios.length; 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格式化和压缩”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: 原生JS怎么进行CSS格式化和压缩

本文链接: https://lsjlt.com/news/77750.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 原生JS怎么进行CSS格式化和压缩
    这篇文章主要介绍“原生JS怎么进行CSS格式化和压缩”,在日常操作中,相信很多人在原生JS怎么进行CSS格式化和压缩问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”原生JS怎么...
    99+
    2024-04-02
  • 怎么用原生JS进行CSS格式化和压缩
    本篇内容介绍了“怎么用原生JS进行CSS格式化和压缩”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前&nb...
    99+
    2024-04-02
  • webpack中怎么打包压缩js和css文件
    这篇文章将为大家详细讲解有关webpack中怎么打包压缩js和css文件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。打包压缩js与css由于webpack...
    99+
    2024-04-02
  • 使用java怎么对BigDecimal进行格式化
    使用java怎么对BigDecimal进行格式化?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。Java的优点是什么1. 简单,只需理解基本的概念,就可以编写适合...
    99+
    2023-06-14
  • Python3中怎么对日期进行格式化
    这篇文章主要介绍“Python3中怎么对日期进行格式化”,在日常操作中,相信很多人在Python3中怎么对日期进行格式化问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Python3中怎么对日期进行格式化”的疑...
    99+
    2023-06-27
  • H5界面怎么生成PDF格式进行输出
    本文小编为大家详细介绍“H5界面怎么生成PDF格式进行输出”,内容详细,步骤清晰,细节处理妥当,希望这篇“H5界面怎么生成PDF格式进行输出”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新...
    99+
    2024-04-02
  • SpringBoot怎么对LocalDateTime进行格式化并解析
    这篇“SpringBoot怎么对LocalDateTime进行格式化并解析”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Sp...
    99+
    2023-07-02
  • u盘无法进行格式化操作怎么办
    小编给大家分享一下u盘无法进行格式化操作怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!u盘无法格式化解决方法:按Win+R组合键打开“运行”对话框,输入“C...
    99+
    2023-06-27
  • 怎么在Android中利用SpannableString对内容进行格式化
    这篇文章将为大家详细讲解有关怎么在Android中利用SpannableString对内容进行格式化,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。要实现的效果:将话题进行变色并且可以点击提示...
    99+
    2023-05-31
    android spannablestring les
  • 在Linux系统怎么正确的对U盘进行格式化
    这篇文章主要介绍了在Linux系统怎么正确的对U盘进行格式化,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在Linux操作系统中如何对U盘进行格式化:在Linux操作系统中对...
    99+
    2023-06-16
  • 在Linux系统的VPS上怎么对硬盘进行分区、格式化和挂载
    本篇内容介绍了“在Linux系统的VPS上怎么对硬盘进行分区、格式化和挂载”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!这是这几天我在设置我...
    99+
    2023-06-12
  • 电脑U盘中病毒不能进行格式化怎么解决
    这篇“电脑U盘中病毒不能进行格式化怎么解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“电脑U盘中病毒不能进行格式化怎么解决...
    99+
    2023-06-27
  • JS怎么利用Intl解决前端日期和时间的格式化
    这篇“JS怎么利用Intl解决前端日期和时间的格式化”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JS怎么利用Intl解决前...
    99+
    2023-07-05
  • 电脑U盘显示0字节无法进行格式化怎么办
    小编给大家分享一下电脑U盘显示0字节无法进行格式化怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!方法一:打开计算机管理界面,随后选择磁盘管理,电脑会显示系统...
    99+
    2023-06-27
  • 怎么使用PHP date()函数对日期或时间进行格式化
    要使用PHP的date()函数对日期或时间进行格式化,需要传递两个参数给该函数。第一个参数是日期或时间的格式,第二个参数是要格式化的...
    99+
    2023-10-12
    PHP
  • 重装win10系统时U盘无法进行格式化操作怎么解决
    这篇文章主要介绍“重装win10系统时U盘无法进行格式化操作怎么解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“重装win10系统时U盘无法进行格式化操作怎么解决”文章能帮助大家解决问题。解决方法...
    99+
    2023-06-27
  • css中怎么使用div元素进行网页布局和样式设置
    本篇内容介绍了“css中怎么使用div元素进行网页布局和样式设置”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!HTML布局首先,我们需要在H...
    99+
    2023-07-06
  • 怎么利用shell脚本实现对一个磁盘进行分区格式化挂载
    这篇文章给大家分享的是有关怎么利用shell脚本实现对一个磁盘进行分区格式化挂载的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。查看当前磁盘分区状况查看当前磁盘的一个分区状况,使用命令:fdisk -lfdisk&...
    99+
    2023-06-09
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作