请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2025-4-17 12:26 编辑
当下，很多阅读品类的APP都提供有黑暗模式，或自动进入，或手动进入，对黑暗环境下的阅读体验有积极作用。Web页可以轻松制作此类功能，方法繁多，这里谈谈如何通过CSS的filter属性来简单实现。
CSS filter属性拥有诸多函数可用，其中，invert() 用于反转输入图像，取值范围 0%~100%（或0~1），值越大反转反转效果越大；hue-rotate() 应用于色相旋转，取色环角度值，0deg~360deg，值为0时表示无变化，值为360deg时表示变回原本原色。那么，假如在filter属性中同时使用这两个函数，设为 filter(1) hue-rotate(180deg)，情况会如何？来实验一下，方法是：
打开任意一个真实有效的Web页，按 F12 进入 DevTools 开发环境，确保已经切换到了控制台（Console），输入以下代码：
const body = document.querySelector('body');
body.style.filter = 'invert(1) hue-rotate(180deg)';
（注意，在控制台输入代码，需要换行时按 Ctrl键 + 回车键，不要直接按回车键，按回车键时直接运行已输入的代码。默认情况下，DevTools控制台会禁止粘贴代码，这是为了安全起见，但如果在尝试粘贴失败后它有提示，可以按照它的提示操作，这样就可以粘贴了）
上述两行代码以 JS 方式操作CSS，第一行获得web页的body标签操作标识，第二行设置body的style属性（HTML属性）的filter属性（CSS属性），输入或粘贴完毕敲回车键，如果代码没有错误，该页面立即进入黑暗模式，退出DevTools工具（再按F12）黑暗模式依然保存。
这样的话，可以在CSS中设置一个暗夜模式的类（class）标签，然后在JS中给特定元素（比如HTML、body或其它子元素）动态地添加或移除这个类标签，我们就可以令网页在二维开关的模式中自如切换。
下面提供的代码依然通过JS操纵CSS，可以在DevTools控制台下运行。代码创建了一个按钮，点击该按钮可以在两种模式中切换：
const body = document.querySelector('body');
const btn = document.createElement('button');
btn.textContent = '切换模式';
btn.style.cssText = `
position: absolute;
left: 20px;
top: 200px;
color: white;
background: blue;
padding: 10px;
`;
btn.onclick = () => {
if (body.style.filter === 'invert(1) hue-rotate(180deg)') {
body.style.filter = 'none';
} else {
body.style.filter = 'invert(1) hue-rotate(180deg)'
}
}
body.appendChild(btn);
| 
发表于 2025-4-17 12:20
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2025-4-17 19:14
楼主