项目场景
我们常在项目里见到这种写法。
<template> <div id="dashboardLayout" :style="styleCSSVariable" ></div> </template>
复制
可以看到,根元素这里使用了一个名为styleCSSVariable的CSS集。这里的实现是:
get styleCSSVariable() { return createDashboardCSS(this.dashboard.setting.style); }
复制
这里可以根据当前仪表盘的用户设置风格(如“暗黑”、“科技”、“酷炫”)进行css样式管理。return了诸如这些设置:
return { // 文字颜色 '--font': '#cccccc', '--font-sub': '#999999', '--font-info': '#666666', // 辅助文字 '--font-color-secondary': '#aaaaaa', // 提示性文字 '--font-color-info': '#ff2d2d', '--font-active-light': '#ffffff', // 删除按钮/文字 '--delete': '#fe5959', // 警示色 '--warning': '#ff9900', // 操作成功 '--success': '#19be6b' .... }
复制
可以看到设计器的元素style样式上绑定了一堆颜色定义。这其实就是CSS中的var()函数用法。
CSS变量
CSS变量(var)是CSS3新增加的一项功能,它可以让我们在样式表中定义一个变量,然后在样式表中的其他地方使用这个变量,从而实现样式的复用。
CSS 变量可以访问 DOM,这意味着您可以创建具有局部或全局范围的变量,使用 JavaScript 来修改变量,以及基于媒体查询来修改变量。
Var()函数
var(name)
复制
background-color: var(--font-active);
var() 函数用于获取插入 CSS 变量的值。当然你也可以用var(name,val),val为获取不到var(name)时返回的默认值
全局变量
写在HTML文档的根元素上面的,我们用伪类选择器来:root获取。
在每个HTML文档中,只有一个根元素,通常是标签。
<!DOCTYPE html> <html /> <head /> <style> :root { --blue: #1e90ff; --white: #ffffff; } </style>
复制
局部变量
如项目中的例子,你可以选择一个容器元素进行注入
<style> #dashboardLayout { --blue: #1e90ff; --white: #ffffff; } </style>
复制
或者像刚才案例通过JS或Vue进行注入,只要绑定到它的style上就行。
局部变量只能在容器内部里获取到css变量值,而全局则是整个页面里的元素都能获取。
css里获取CSS绑定的CSS变量值
.component h1 { color: var(--blue) }
复制
JS里获取CSS绑定的CSS变量值
需要借助Window.getComputedStyle方法返回制定元素的CSS熟悉对象
<html lang="en"> <body> <div class="own" id="own"> </div> </body> </html> <style> .own { --ownColor: '#fffff'; font-size: 16; } </style> <script> let elem1 = document.getElementById("own"); var valObj = window.getComputedStyle(elem1); console.log(valObj) console.log(valObj['ownColor']) console.log(valObj.getPropertyValue('--ownColor')) </script>
复制
注意,传入getComputedStyle是确切的元素对象。返回的style是一个实时的 CSSStyleDeclaration 对象,当元素的样式更改时,它会自动更新本身。
那么可以看到这个对象是一个类数组对象。假如我们心急地直接用valObj['ownColor']来获取css变量值,那么返回的肯定是undefined。此时需要借助另外一个函数
CSSStyleDeclaration.getPropertyValue() 接口返回一个 DOMString ,其中包含请求的 CSS 属性的值
如果在Vue+ts的环境里,我们应该如何优雅书写这个方法?
const skinColor = getSkin('--font-sub');
复制
/** * 获取全局颜色 * @param {*} key * @returns */ export function getSkin(key) { // 找到根部容器或局部容器 const dom = document.querySelector('#dashboardLayout'); return getComputedStyle( // 顶部容器不存在,则选择网页文档根元素 dom ? dom : document.documentElement, ).getPropertyValue(key); }
复制
/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/getComputedStyle) */ declare function getComputedStyle(elt: Element, pseudoElt?: string | null): CSSStyleDeclaration; declare var CSSStyleDeclaration: { prototype: CSSStyleDeclaration; new(): CSSStyleDeclaration; };
复制