一行代码“黑”掉任意网站

news2024/11/19 3:34:06

文章目录

只需一行代码,轻轻一点就可以把任意网站变成暗黑模式。
在这里插入图片描述

首先我们先做一个实验,在任意网站中,打开浏览器开发者工具(F12),在 C1onsole 控制台输入如下代码并回车:

document.documentElement.style.filter='invert(85%) hue-rotate(180deg)'

在这里插入图片描述

神奇的事情发生了,当前打开的网站变成了暗黑模式。

*原理解释

  1. document.documentElement 获取文档对象的根元素,即元素
  2. 给html元素的.style样式添加filter滤镜样式为invert(85%) hue-rotate(180deg)
  3. invert() 反转图像。
  4. 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%的暗黑,再点一次变回正常模式。

如果有什么疑惑联系讨论

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409326.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用npm安装yarn

很多同学用惯了npm安装项目依赖, 想要尝试使用yarn的命令, 但是第一次使用yarn的时候,发现报错, 这是什么情况呢? 因为,想要使用yarn,需要首先安装yarn。 那么问题来了,如何安装呢…

IDEA 创建Maven Web项目

背景 公司有一个非常老的项目,决定进行简单重构,纳入自动化流水线部署的序列。原项目采用很古老的Jar包依赖模式,也就是直接将jar包放在项目中。同时,项目结构也非常奇特,不是标准的Web项目目录结果。 于是&#xff…

用vue实现打印页面的几种方法

1.第一种就是直接调用 window.print()方法 这种方法的坏处就是 默认打印整个页面,不能打印局部页面。 2.第二种使用v-print 首先先下载 npm install vue-print-nb --save 然后在main.js中引入 main.js中引入 import Print from vue-print-nb Vue.user(Print)由于…

JS 生成条形码(一维码)jsBarcode

jsBarcode 官网 一、安装 script 引入 <script src"JsBarcode.all.min.js"></script>地址&#xff1a;https://cdn.jsdelivr.net/npm/jsbarcode3.11.5/dist/JsBarcode.all.min.js 也可以进官网查看地址。 npm方式 安装&#xff1a; npm install jsb…

vue3路由配置与路由跳转

Vue Router 是Vue.js的官方路由器。它与 Vue.js 核心深度集成&#xff0c;使使用 Vue.js 构建单页应用程序变得轻而易举。特点包括&#xff1a; 嵌套路由映射 动态路由 模块化、基于组件的路由器配置 路由参数、查询、通配符 查看由 Vue.js 的过渡系统提供支持的过渡效果细粒度…

【蓝桥杯Web】第十四届蓝桥杯Web模拟赛 3 期 | 精品题解(下)

&#x1f9d1;‍&#x1f4bc; 个人简介&#xff1a;一个不甘平庸的平凡人&#x1f36c; &#x1f5a5;️ 蓝桥杯专栏&#xff1a;蓝桥杯题解/感悟 &#x1f5a5;️ TS知识总结&#xff1a;十万字TS知识点总结 &#x1f449; 你的一键三连是我更新的最大动力❤️&#xff01; &…

HTML插入图片

图片介绍一、src属性二、其余属性三、alt用法四、title用法五、属性特点六、src路径的讲解一、src属性 符号&#xff1a;img 特点&#xff1a;单标签 代码&#xff1a; <!doctype html> <html><head><meta charset"utf-8"><title>HT…

尚品汇后台管理项目(Vue)

简介 1:什么是后台管理系统项目? 注意&#xff1a;前端领域当中&#xff0c;开发后台管理系统项目&#xff0c;并非是java、php等后台语言项目。 在前面课程当中&#xff0c;我们已经开发了一个项目【尚品汇电商平台项目】&#xff0c;这个项目主要针对的是用户&#xff08;游…

vue表单验证rules以及validator验证器的使用

为防止用户犯错&#xff0c;尽可能更早地发现并纠正错误。 Element中Form &#xff08;表单&#xff09;组件提供了表单验证的功能&#xff0c;只需要通过 rules 属性传入约定的验证规则&#xff0c;并将 Form-Item 的 prop 属性设置为需校验的字段名即可。 注意&#xff1a;…

案例说明:vue中Element UI下拉列表el-option中的key、value、label含义各是什么

可以简单理解为&#xff1a;label 是给用户展示的东西&#xff0c;value是前端往后端传递的真实值 <template><div><el-page-header back"goBack" content"注册"></el-page-header><el-divider></el-divider><el-…

flex布局优化(两端对齐,从左至右)

文章目录前言方式一 nth-child方式二 gap属性方式三 设置margin左右两边为负值总结前言 flex布局是前端常用的布局方式之一&#xff0c;但在使用过程中&#xff0c;我们总是感觉不太方便&#xff0c;因为日常开发中&#xff0c;大多数时候&#xff0c;我们想要的效果是这样的 …

2023年网络安全比赛--CMS网站渗透中职组(超详细)

一、竞赛时间 180分钟 共计3小时 二、竞赛阶段 1.使用渗透机对服务器信息收集,并将服务器中网站服务端口号作为flag提交; 2.使用渗透机对服务器信息收集,将网站的名称作为flag提交; 3.使用渗透机对服务器渗透,将可渗透页面的名称作为flag提交; 4.使用渗透机对服务器渗透,…

全网最新的vue.js下载和安装的3种方法(2023年)

文章目录1. 文章引言2. 环境搭建3. 安装vue.js3.1 方法一&#xff1a;官网下载vue.js源代码3.2 方法二&#xff1a;使用npm install创建3.3 方法三&#xff1a;使用bower下载4. 总结1. 文章引言 我主要从事java后端开发&#xff0c;但对前端也非常感兴趣&#xff0c;立志成为全…

【vite·5】vite中环境变量的使用与配置(全网最全)

什么是环境变量 根据当前的代码环境变化的变量就叫做环境变量。比如&#xff0c;在生产环境和开发环境将BASE_URL设置成不同的值&#xff0c;用来请求不同的环境的接口。 环境变量一般可以在全局访问到。在webapck中&#xff0c;我们也许看到过这样的代码 // webpack.config.…

JavaWeb:实现购物商城(课程设计完整版)

前言 做一个javaweb可以对前后端基础知识进行巩固。 就比如 前端可以用 htmlcssjsjQuery&#xff1b; 后端Http协议&#xff0c;Servlet基础&#xff0c;JSP技术&#xff0c;Mysql等 该程序做的这个就相对比较基础&#xff0c;适合大学生当课程设计用 在文章结尾附项目源代码和…

Vue生命周期钩子剖析(共12个钩子)

生命周期示意图&#xff1a; 生命周期及其钩子函数理解 生命周期&#xff1a; Vue是一个构造函数&#xff0c;当执行执行这个函数时&#xff0c;相当于初始化vue实例&#xff1b;在创建实例过程中&#xff0c;需要设置数据监听&#xff0c;编译模板&#xff0c;将实例挂载到DO…

Vue warn]: Component is missing template or render function.

警告&#xff1a;Component is missing template or render function. 问题声明&#xff1a; 组件缺少模板或渲染功能。 解决问题 方式一&#xff1a; 在写vue项目时&#xff0c;网页没有加载出来东西一片空白&#xff0c;然后控制台出现黄色的警告&#xff1a; 原因是&…

html--盒子的边框属性(border)

content:内容框&#xff08;我们设置的宽高是内容框的宽高&#xff09; padding:内边距 top right bottom left&#xff08;四边--一般默认指定的方向&#xff09; border:边框线包裹了内边距&#xff08;四边&#xff09; margin:外边距 在边框的外面 元素和其他元素的间…

【手把手带你学JavaSE】String类(下篇)

目录前言一、字符串查找二、字符串转换2.1 数值和字符串转化2.2 大小写转化2.3 字符串和数组的转换2.4 格式化三、字符串替换四、字符串拆分4.1 拆分处理4.2 部分拆分4.3 拆分IP地址五、字符串截取六、其他的方法6.1 String trim()6.2 boolean isEmpty()6.3 int length()6.4 判…

vue3与vue2的区别(你不知道细节全在这)

先来说说当下市场开发使用的问题&#xff0c;目前2021年使用vue3开发的企业还是少&#xff0c;基本上都还是以vue2的形式进行开发&#xff0c;vue3的开发模式跟react很像&#xff0c;这时候有人就会想那我学vue3有用么&#xff0c;淦&#xff0c;他喵的&#xff0c;先别激动&am…