位置: IT常识 - 正文
一行代码“黑”掉任意网站(一行简单的代码)
编辑：rootadmin一行代码“黑”掉任意网站 文章目录
本文链接地址:https://www.jiuchutong.com/zhishi/297847.html
转载请保留说明！
推荐整理分享一行代码“黑”掉任意网站(一行简单的代码)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:一行代码黑客,一行简单的代码,一行代码5个bug,一行简单的代码,一行的代码,一行代码5个bug,一行的代码,一行代码黑客,内容如对您有帮助，希望把文章链接给更多的朋友！
只需一行代码，轻轻一点就可以把任意网站变成暗黑模式。
首先我们先做一个实验，在任意网站中，打开浏览器开发者工具(F12)，在 C1onsole 控制台输入如下代码并回车：
document.documentElement.style.filter='invert(85%) hue-rotate(180deg)'神奇的事情发生了，当前打开的网站变成了暗黑模式。
*原理解释
document.documentElement 获取文档对象的根元素，即元素给html元素的.style样式添加filter滤镜样式为invert(85%) hue-rotate(180deg)invert() 反转图像。hue-rotate()色相旋转。更多滤镜知识：filter (opens new window)。https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
为了更方便实用，达到轻轻一点就可以对网页施加魔法🎉，
我们对代码做了一点点🤏🏻改动。（修正了滤镜对图片等元素的影响）
javascript: (function () { const docStyle = document.documentElement.style; if (!window.modeIndex) { window.modeIndex = 0; } const styleList = [ '', 'invert(85%) hue-rotate(180deg)', 'invert(100%) hue-rotate(180deg)', ]; modeIndex = modeIndex >= styleList.length - 1 ? 0 : modeIndex + 1; docStyle.filter = styleList[modeIndex]; document.body.querySelectorAll('img, picture, video').forEach(el => el.style.filter = modeIndex ? 'invert(1) hue-rotate(180deg)' : '');})();然后打开浏览器书签管理器，添加新书签，在网址栏粘贴这段代码并保存：
以后在任意网站，只需要轻轻一点 切换模式 书签就可以让它变成85%的暗黑，再点一次就是100%的暗黑，再点一次变回正常模式。
如果有什么疑惑联系讨论
下一篇：前端面试题 | 什么是回流和重绘？它们的区别是什么？(前端面试题什么是网络协议)
