一行代码可以做什么（一行代码“黑”掉任意网站）

时间2025-05-07 08:00:19分类IT科技浏览3573

导读：只需一行代码，轻轻一点就可以把任意网站变成暗黑模式。...

只需一行代码，轻轻一点就可以把任意网站变成暗黑模式。

首先我们先做一个实验，在任意网站中，打开浏览器开发者工具(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%的暗黑，再点一次变回正常模式。

如果有什么疑惑联系讨论

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。