你知道这个 CSS 属性吗 —— getComputedStyle

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 兼容性良好，有空试试吧？

image.png

OK，以上便是本篇分享，希望各位工友喜欢~ 欢迎点赞、收藏、评论 🤟 我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我，安东尼陪你一起度过漫长编程岁月 🌏 😺我的博客：https://tuaran.github.io 😸公众号：掘金安东尼

本文正在参加「金石计划 . 瓜分6万现金大奖」