zoukankan      html  css  js  c++  java
  • 多种CSS变量技术 带入进入老司机行业

    CSS 变量技术

    具体用法

    使用 -- 声明变量,使用 var() 函数获取变量。

    :root{
        --header-height: 70px;
    }
    
    body {
        --color: white;
    }
    
    .header {
        height: var(--header-height);
    
    }
    

    var() 函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。

    color: var(--color);

    与 calc 结合使用

    height: calc(100vh - var(--header-height));

    变量作用域

    所在选择器优先级高的变量声明会覆盖优先级低的。

    body {
        --color: red;
    }
    
    p {
        --color: black;
    }
    <p>显示为黑色</p>

    javascript 检测浏览器支持

    const isSupported =
      window.CSS &&
      window.CSS.supports &&
      window.CSS.supports('--a', 0);

    javascript 操作css变量

    读取变量的值:

    const dom = document.querySelector('selector');
    dom.style.getPropertyValue('--color');

    修改css变量的值:

    const dom = document.querySelector('selector');
    dom.style.setProperty('--color', 'white');
  • 相关阅读:
    遥控器拆卸记录
    计算器拆卸记录
    no matching constructor for initialization
    STL
    排序方法
    二叉树之广度优先遍历
    C++之queue学习记录
    方向电路
    站间联系电路
    求二叉树的最大深度
  • 原文地址:https://www.cnblogs.com/ypppt/p/12900856.html
Copyright © 2011-2022 走看看