CSS的var()函数用法与JS获取css函数变量值的方法

项目场景

我们常在项目里见到这种写法。

<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变量值，而全局则是整个页面里的元素都能获取。

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;
};