1. 程式人生 > >CSS中定義變數,並使用變數設定屬性值

CSS中定義變數,並使用變數設定屬性值

    :root{
      --base: yellow;
      --spacing: 10px;
      --blur: 10px;
    }

上面程式碼定義了3個變數,:root使得所有人可訪問

    img{
      filter: blur(var(--blur));
      padding: var(--spacing);
      background: var(--base);

    }

上面使用了之前定義的變數作為屬性值

還可以通過js改變變數的值,從而改變屬性

 document.documentElement.style.setProperty(`--${this.name}`,this.value + suffix)

其中: 
${this.name}是解析變數的寫法