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 端
2. 黑暗模式
我们经常用到黑暗模式：
自从有了 CSS 自定义属性，黑暗模式写起来也变得方便：
: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;
}
}
如何用 JS 判断当前是处于黑暗模式，还是浅色主题？
getComputedStyle 可以做到~~
一行代码解决：
var mode = getComputedStyle(document.documentElement).getPropertyValue('--mode').trim();
// mode结果是'"dark"'则表示黑夜主题，深色模式，黑暗风格，护眼模式。
小结
getComputedStyle 属性和 CSS 伪类搭配有妙用！能让 JS 读取 CSS 的信息，让 JS 获取 CSS 的能力~~
而且 getComputedStyle 兼容性良好，有空试试吧？
OK，以上便是本篇分享，希望各位工友喜欢~ 欢迎点赞、收藏、评论 🤟
我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我，安东尼陪你一起度过漫长编程岁月 🌏
😺我的博客：https://tuaran.github.io
😸公众号：掘金安东尼
😹V我加群一起学习：anthony1453
本文正在参加「金石计划 . 瓜分6万现金大奖」
暂无评论内容