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

    项目场景

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

    1. <template>
    2.   <div
    3.     id="dashboardLayout"
    4.     :style="styleCSSVariable"
    5.   >div>
    6. template>

        可以看到，根元素这里使用了一个名为styleCSSVariable的CSS集。这里的实现是：

    1. get styleCSSVariable() {
    2.     return createDashboardCSS(this.dashboard.setting.style);
    3. }

            这里可以根据当前仪表盘的用户设置风格（如“暗黑”、“科技”、“酷炫”）进行css样式管理。return了诸如这些设置：

    1.  return {
    2.     // 文字颜色
    3.     '--font': '#cccccc',
    4.     '--font-sub': '#999999',
    5.     '--font-info': '#666666',
    6.     // 辅助文字
    7.     '--font-color-secondary': '#aaaaaa',
    8.     // 提示性文字
    9.     '--font-color-info': '#ff2d2d',
    10.     '--font-active-light': '#ffffff',
    11.  
    12.     // 删除按钮/文字
    13.     '--delete': '#fe5959',
    14.     // 警示色
    15.     '--warning': '#ff9900',
    16.     // 操作成功
    17.     '--success': '#19be6b'
    18.     ....
    19. }

            可以看到设计器的元素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文档中，只有一个根元素，通常是标签。

    1. html>
    2. <html />
    3. <head />
    4. <style>
    5.     :root {
    6.       --blue: #1e90ff;
    7.       --white: #ffffff; 
    8.     }
    9. style>

    局部变量

            如项目中的例子，你可以选择一个容器元素进行注入

    1. <style>
    2.     #dashboardLayout {
    3.       --blue: #1e90ff;
    4.       --white: #ffffff; 
    5.     }
    6. style>

            或者像刚才案例通过JS或Vue进行注入，只要绑定到它的style上就行。

            局部变量只能在容器内部里获取到css变量值，而全局则是整个页面里的元素都能获取。

     css里获取CSS绑定的CSS变量值

    1. .component h1 {
    2.     color: var(--blue)
    3. }

    JS里获取CSS绑定的CSS变量值

            需要借助Window.getComputedStyle方法返回制定元素的CSS熟悉对象

    1. <html lang="en">
    2. <body>
    3.     <div class="own" id="own">
    4.  
    5.     div>
    6. body>
    7. html>
    8. <style>
    9.     .own {
    10.         --ownColor: '#fffff';
    11.         font-size: 16;
    12.     }
    13. style>
    14. <script>
    15.     let elem1 = document.getElementById("own");
    16.     var valObj = window.getComputedStyle(elem1);
    17.     console.log(valObj)
    18.     console.log(valObj['ownColor'])
    19.     console.log(valObj.getPropertyValue('--ownColor'))
    20. script>

             注意，传入getComputedStyle是确切的元素对象。返回的style是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身。

            那么可以看到这个对象是一个类数组对象。假如我们心急地直接用valObj['ownColor']来获取css变量值，那么返回的肯定是undefined。此时需要借助另外一个函数

    CSSStyleDeclaration.getPropertyValue() 接口返回一个 DOMString ，其中包含请求的 CSS 属性的值

             如果在Vue+ts的环境里，我们应该如何优雅书写这个方法？

    const skinColor = getSkin('--font-sub');
    1. /**
    2.  * 获取全局颜色
    3.  * @param {*} key
    4.  * @returns
    5.  */
    6. export function getSkin(key) {
    7.   // 找到根部容器或局部容器
    8.   const dom = document.querySelector('#dashboardLayout');
    9.   return getComputedStyle(
    10.     // 顶部容器不存在，则选择网页文档根元素
    11.     dom ? dom : document.documentElement,
    12.   ).getPropertyValue(key);
    13. }
    1. /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/getComputedStyle) */
    2. declare function getComputedStyle(elt: Element, pseudoElt?: string | null): CSSStyleDeclaration;
    3.  
    4. declare var CSSStyleDeclaration: {
    5.     prototype: CSSStyleDeclaration;
    6.     new(): CSSStyleDeclaration;
    7. };

  • 相关阅读:
    java io流中为什么使用缓冲流就能加快文件读写速度
    某公路边坡支护设计（lunwen+计算书+cad图纸+施工组织设计）
    Hadoop 学习笔记三 --JobClient 的执行过程
    Minio安装
    leetcode:714. 买卖股票的最佳时机含手续费
    数据倾斜常见的解决方案
    代码随想录算法训练营第十九天 | LeetCode 654. 最大二叉树、617. 合并二叉树、700. 二叉搜索树中的搜索、98. 验证二叉搜索树
    不用任何 js 库，纯前端导出数据到 Excel / CSV 文件就这么简单几行代码
    2023系统分析师---论需求分析方法及应用（内部消息）
    华纳云：linux怎么查看Raid磁盘阵列信息
  • 原文地址：https://blog.csdn.net/weixin_42274805/article/details/133135688