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