当下，很多阅读品类的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);

前一篇: 在Firefox和Chrome中统一range样式
下一篇: 没有了