js如何清除样式,使用uncss从页面中删除未使用的样式!

一些有关于使用uncss从页面中删除未使用的样式!以及js如何清除样式的相关话题,你对使用uncss从页面中删除未使用的样式!这样的题有了解多少呢?就让小编带各位了解一下吧!


大家好,很高兴再次见到大家。我对前端创业很感兴趣,会加深自己基于前端的技术。喜欢、收藏、转发。


什么是UnCSS?


UnCSS是一个从样式表中删除未使用的CSS的工具,可以跨多个文件工作,并支持Javascript注入的CSS。


UnCSS中删除未使用的规则的流程如下


HTML文件由jsdom加载并运行JavaScript。


所有样式表均由PostCSS解析。


documentquerySelector过滤掉HTML文件中找不到的选择器。


其余规则将转换回CSS。


不过,在使用Uncss时,必须注意以下几点


UnCSS不适用于非HTML页面,例如模板或PHP文件。如果开发人员需要针对模板运行UnCSS,他们必须从模板生成示例HTML页面并在生成的文件上运行uncss,或者运行实时本地开发服务器并将uncss指向该服务器。


UnCSS仅执行页面加载时运行的Javascript。它不处理在用户交互时运行的Javascript。如果您想在用户交互时保留Javascript添加的类,您应该使用忽略选项。


目前,uncss通过MIT协议在Github上开源,拥有超过93,000个star和超过194,000个项目依赖项。


如何使用UnCSS


下面是在Nodejs环境中使用uncss的示例。


varuncss=require39;var文件=[39;39;39;39;39;39;39;public39;39;/test-[0-9]+/],ignoreSheets:[/fontsgoogleapis/]、inject:函数窗口、jsdom:media:[39;]、raw:39;report:false、strictSSL:true、stylesheets:[39;39;]、timeout:1000、uncssrc:39;userAgent3336039;uncss文件,选项,函数错误,输出;/看妈妈,没有选项!/uncssfiles,函数错误,输出;/指定原始HTML/varrawHtml=39;uncssrawHtml,选项,函数错误,输出;UnCSS还可以与其他JavaScript构建系统(例如Grunt、Broccoli或Gulp)一起使用,只需安装某些它们也可以一起使用。


grunt-uncss


gulp-uncss


西兰花-uncss


在CLI环境中使用以下命令


用法uncss[选项]lt;文件或URL,gt;示例uncssrootlt;foldergt;绝对路径34;stylesheet34;path/to/filecss34;/css/stylecss34;


String[]Ignore提供UnCSS不应删除的选择器列表。例如,通过用户与页面交互添加的样式UnCSS尚无法检测到。文字名称和正则表达式模式都可以识别。否则,您可以在特定选择器之前添加注释。


/uncss:ignore/selector1选择器2/uncss:ignorestart//这里的所有规则都将被忽略//uncss:ignoreend/ignoreSheets、inject、jsdom、media、raw、Report、strictSSL、stylesheet、timeout、uncssrc和其他添加内容,包括引用的配置支持信息。文章的最后。


参考


一、js如何修改编辑器图文样式?

基本js是这样写的obj-style-height='样式值'obj-style-width='样式值'jq$-obj,-css-,


二、js中可以直接使用sass样式吗?

您不需要安装这些依赖项。


三、su怎么去掉样式?

1-有多种方法可以删除样式。2-一种常见的方法是使用CSS重置样式表将所有元素的样式设置为默认,从而删除原始样式。3-还可以使用JavaScript或jQuery等脚本语言动态修改元素的样式或手动从HTML代码中删除样式相关的代码。您必须根据您的具体情况选择合适的方法。


除非特别注明,本站所有文字均为原创文章,作者:admin

No Comment

留言

电子邮件地址不会被公开。 必填项已用*标注

感谢你的留言。。。