Computed 在 Vue 中常用，是一种计算属性，里面的值是响应式的，但你知道 getComputedStyle 这个 CSS 属性吗？Computed + Style ，没错，样式也能做到响应式。
从 Window.getComputedStyle() - Web API 接口参考 | MDN MDN 这里可以得知：
let style = window.getComputedStyle(element, [pseudoElt])
style是一个实时的CSSStyleDeclaration对象，当元素的样式更改时，它会自动更新本身。
本篇带来 getComputedStyle 的 2 个巧用~
1. PC or Mobile
我们通常用响应式布局判断当前设备是 PC 端还是 Mobile，然后采用不同的样式。
@media screen and (max-width: 480px) { /* 小屏幕宽度下的响应式布局 */ }
如果想在 JS 也拿到这个信息（当前是 PC 还是 Mobile），可以获得 screen.width，但这个 width 信息是不准确的，手机也存在横屏的时候，会产生临界宽度的问题。
这个时候我们可以利用 getComputedStyle 拿 CSS 的伪元素信息，再搭配 CSS 原生支持的 any-hover 属性，就能在 CSS 和 JS 两处地方，准确地知道：当前是 PC 还是 Mobile。
@media (any-hover: none) { body::before { content: 'hoverNone'; display: none; } } var strContent = getComputedStyle(document.body, '::before').content;
// strContent结果是'none'则表示支持 hover，是 PC 端，
// strContent结果是'"hoverNone"'则表示不支持 hover 经过，需要换成 click 事件，是 Mobile 端
这样 JS 就拥有了 CSS any-hover 的能力~
2. 黑暗模式
我们经常用到黑暗模式：自从有了 CSS 自定义属性，黑暗模式写起来也变得方便：
JS 如何共享自定义属性 --mode 的内容？
如何用 JS 判断当前是处于黑暗模式，还是浅色主题？
getComputedStyle 可以做到~~
:root { --mode: 'unknown'; } @media (prefers-color-scheme: dark) { /* 黑暗模式 */ :root { --mode: 'dark'; --colorLink: #bfdbff; --colorMark: #cc0000; --colorText: #ffffff; --colorLight: #777777; } } @media (prefers-color-scheme: light) { /* 浅色主题 */ :root { --mode: 'light'; --colorLink: #34538b; --colorMark: #cc0000; --colorText: #000000; --colorLight: #cccccc; } }
一行代码解决：
var mode = getComputedStyle(document.documentElement).getPropertyValue('--mode').trim(); // mode结果是'"dark"'则表示黑夜主题，深色模式，黑暗风格，护眼模式。
小结
getComputedStyle 属性和 CSS 伪类搭配有妙用！能让 JS 读取 CSS 的信息，让 JS 获取 CSS 的能力~~
而且 getComputedStyle 兼容性良好，有空试试吧？
