热搜：编程 Python Microsoft 编程语言 C++

javascript压缩CSS样式代码的方法

发布时间：2023-01-01 05:46:47 来源：网络

.

不要认为自己比别人做得好，即便你很出色。常问自己，谁对我有恩还没加倍报答。杜绝事必躬亲，学会抓大放小。

在前端网页的优化中，压缩CSS文件可以减小CSS文件的体积，用来加快前端网页的加载速度，减少用户的等待时间，也是SEO中必不可少的。虽然说压缩CSS文件是在服务器端完成的，但利用js代码也可以在web前端进行CSS代码的压缩！

js压缩CSS样式代码的方法

js代码

<script>
var css = 'CSS代码'; //格压缩的CSS代码
css = css.replace(/\/\*(.|\n)*?\*\//g, ""); //删除注释
css = css.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
css = css.replace(/\,[\s\.\#\d]*\{/g, "{"); //容错处理
css = css.replace(/;\s*;/g, ";"); //清除连续分号
css = css.match(/^\s*(\S+(\s+\S+)*)\s*$/); //去掉首尾空白
ycss = css == null ? "" : css[1];
console.log(ycss); //压缩后的CSS代码
</script>

js简单压缩CSS样式代码的小工具

下面是一个简单的压缩CSS代码的web页面小工具，将代码复制到本地保存成html网页运行即可！

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<textarea  id="css" style="width:500px;height: 200px;"></textarea>
<button id="yasuo">压缩</button>
<script>
    $('#yasuo').on('click',function(){
        $('#css').val(compress_Css($('#css').val()));
    });
    function compress_Css(s) {
        //压缩代码
        s = s.replace(/\/\*(.|\n)*?\*\//g, ""); //删除注释
        s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
        s = s.replace(/\,[\s\.\#\d]*\{/g, "{"); //容错处理
        s = s.replace(/;\s*;/g, ";"); //清除连续分号
        s = s.match(/^\s*(\S+(\s+\S+)*)\s*$/); //去掉首尾空白
        return s == null ? "" : s[1];
    }
</script>
</body>
</html>

以上就是 javascript压缩CSS样式代码的方法。越走心境越澄明的我们，最后都会遇上最好的自己。更多关于 javascript压缩CSS样式代码的方法请关注haodaima.com其它相关文章！

以下您可能有感兴趣的文章: