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

·  阅读 1699
你知道这个 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 日更文 ✍ 关注我,安东尼陪你一起度过漫长编程岁月 🌏

😺我的博客:tuaran.github.io

😸公众号:掘金安东尼

😹V我加群一起学习:anthony1453

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

收藏成功!
已添加到「」, 点击更改