最干净方案是用:root声明css变量控制filter，html{filter:grayscale(var(--grayscale))}，js通过document.documentelement.style.setproperty()动态切换--grayscale值。
直接用 :root 声明 CSS 变量 + filter 是最干净的方案
不用改 HTML 结构、不依赖 JS 切换 class、不污染全局选择器，只靠变量驱动滤镜强度。核心是把 grayscale() 的参数从写死值变成变量引用：
:root { --grayscale: 1; }html { filter: grayscale(var(--grayscale)); -webkit-filter: grayscale(var(--grayscale)); }- 后续只需改
--grayscale值（0关闭，1全灰，0.7半灰），样式自动重算
注意：IE 不支持 var()，所以此法天然放弃 IE11 及更老版本 —— 如果必须兼容，得 fallback 到 JS 注入或条件注释，但 2026 年绝大多数生产环境已无此必要。
document.documentElement.style.setProperty() 是运行时切换的关键
变量声明在 :root，但想用 JS 动态开关，不能改 CSS 文件，得操作 DOM 样式层：
- 开启灰色：
document.documentElement.style.setProperty('--grayscale', '1'); - 关闭灰色：
document.documentElement.style.setProperty('--grayscale', '0'); - 别用
document.body或其他节点，html是根元素，:root对应它，改这里才保证全局生效 - 如果页面有 SSR 或 hydration 过程，确保 JS 执行时机在 DOM ready 之后，否则可能被服务端样式覆盖
uni-app App 端不认 CSS 变量控制的 filter
哪怕你在 :root 里写了 --grayscale，又在 html 上用了 filter: grayscale(var(--grayscale))，App 端（iOS/Android）依然不会变灰 —— 因为原生渲染层压根不解析这个 CSS 属性。
- App 端唯一可靠方式仍是
manifest.json中配置"plus": { "style": { "grayscale": true } }，且需 HBuilderX 3.6.13+ + 重新打包 - 想运行时动态控制？只能妥协：JS 存开关状态（
uni.setStorageSync('grayscale', true)），然后在App.vue的onLaunch里读取，并给加 class（如grayscale-mode），再配 CSS 规则作用于 Webview 内容区域 - 原生控件（
picker、camera、状态栏图标）永远无法被 CSS 滤镜影响，这是系统级限制，别浪费时间尝试覆盖
IE11 和部分旧 Android WebView 的兼容断点在哪
IE11 完全不支持 filter: grayscale()，也不支持 var()，但它认 filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)；而某些 Android 4.x 的 WebView 虽支持 filter，却不支持多值写法（比如同时写 -webkit-filter 和 filter 会冲突）。
- 真要保这些旧环境，得用条件加载：检测
document.documentMode === 11或 UA 字符串含Trident/7.0，然后注入 IE 专用样式表 - 更现实的做法是：用
@supports (filter: grayscale(0))包裹现代写法，再在外面写 IE 专属 fallback，避免样式污染 - SVG 滤镜 URL 方案（
filter: url("data:image/svg+xml...")）虽理论上兼容性更好，但 Base64 编码过长、调试困难、部分 CDN 会拦截 data: URL，实际线上极少采用
真正容易被忽略的是：灰色模式一旦启用，所有 canvas 绘制内容、WebGL 渲染层、第三方地图 SDK 的瓦片图，都不会自动变灰 —— 它们绕过了 CSS 渲染管线，得各自单独处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
