如何动态修改页面的css/js内容

=Start=

缘由:

没想到前端里面的黑科技这么多,简单学习了解一下,扩展一下自己的知识面。

这里主要介绍一下——如何根据自身需要来按条件修改页面的默认样式。

正文:

参考解答:

总的来说,思路有2种:

  1. 在数据传到浏览器之前,借助浏览器代理等相关工具进行修改后再传递给浏览器进行展示,比如:Fiddler、BurpSuite等;
  2. 在数据传到浏览器之后,通过浏览器插件进行修改并覆盖,比如:Chrome浏览器插件。

刚了解到的一些常见工具/方法有:

  • Fiddler/BurpSuite自定义脚本;
  • js: TamperMonkey
  • css: Stylish/Stylus

下面用 Stylish/Stylus 做一个简单的介绍和使用样例说明:

User styles 是一个提供各大知名网站的网站主题和皮肤风格的站点,通过该网站开发的浏览器扩展插件Stylish,就可以为任意网站来自定义主题了,想要什么类型的自己修改或者使用已经制作好的主题。

其实该网站就是利用浏览器的扩展插件Stylish 通过替换网页本身的 CSS 来达到的「美化/自定义」的目的。你可利用Stylish为许多网站安装主题和皮肤,也可创建自己的主题和皮肤,例如为Reddit添加黑色风格,使用简约的Facebook,或者更改Google、Twitter或您最爱的任意网站的外观,支持自定义背景、配色方案、字体甚至动画。

参考链接:

=END=

声明: 除非注明,ixyzero.com文章均为原创,转载请以链接形式标明本文地址,谢谢!
https://ixyzero.com/blog/archives/4605.html

《如何动态修改页面的css/js内容》上有1条评论

发表评论

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