zoukankan      html  css  js  c++  java
  • 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');
  • 相关阅读:
    hdu 5116 计数
    hdu 5117 数学公式展开 + dp
    hdu 5115 Dire Wolf 区间dp
    I00025 寻找循环数
    外部设备发展趋势
    外部设备发展趋势
    互联网
    互联网
    I00024 出钱买羽
    I00024 出钱买羽
  • 原文地址:https://www.cnblogs.com/ypppt/p/12849329.html
Copyright © 2011-2022 走看看