欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS變量實(shí)現(xiàn)主題切換的方法

  發(fā)布時(shí)間：2021-06-23 16:40:35   作者：小丶k   我要評論
本文主要介紹了CSS變量實(shí)現(xiàn)主題切換的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

CSS 變量

基本用法

聲明一個(gè)變量，屬性名需要以兩個(gè)減號(hào)（--）開始，屬性值則可以是任何有效的CSS值。

element {
  --main-bg-color: brown;
}

選擇器是指定變量的可見作用域，該變量僅用于匹配當(dāng)前選擇器及其子孫，通常的最佳實(shí)踐是定義在根偽類 :root 下，這樣就可以在HTML文檔的任何地方訪問到它了。

:root {
  --main-bg-color: brown;
}

使用一個(gè)局部變量時(shí)用 var() 函數(shù)包裹以表示一個(gè)合法的屬性值:

element {
  background-color: var(--main-bg-color);
}

備用值

用 var() 函數(shù)可以定義多個(gè)備用值(fallback value)，當(dāng)給定值未定義時(shí)將會(huì)用備用值替換

備用值并不是用于實(shí)現(xiàn)瀏覽器兼容性的。如果瀏覽器不支持CSS自定義屬性，備用值也沒什么用

color: var(--my-var, red);
background-color: var(--my-var, var(--my-background, pink));

有效性

傳統(tǒng)的CSS概念里，有效性和屬性是綁定的，這對變量來說并不適用。當(dāng)變量被解析，瀏覽器不知道它們什么時(shí)候會(huì)被使用，所以必須認(rèn)為這些值都是有效的。
即便這些值是有效的，但當(dāng)通過 var() 函數(shù)調(diào)用時(shí)，它在特定上下文環(huán)境下也可能不會(huì)奏效。屬性和自定義變量會(huì)導(dǎo)致無效的CSS語句，這引入了一個(gè)新的概念：計(jì)算時(shí)有效性。

<p>This paragraph is initial black.</p> 

:root { --text-color: 16px; }
p { color: blue; }
p { color: var(--text-color); }

瀏覽器將 --text-color 的值替換給了 var(--text-color)，但是 16px 并不是 color 的合法屬性值。代換之后，該屬性不會(huì)產(chǎn)生任何作用。瀏覽器會(huì)執(zhí)行如下兩個(gè)步驟：

  • 檢查屬性 color 是否為繼承屬性。是，但是 <p> 沒有任何父元素定義了 color 屬性。轉(zhuǎn)到下一步。
  • 將該值設(shè)置為它的默認(rèn)初始值，black。

當(dāng)CSS屬性-值對中存在語法錯(cuò)誤，該行則會(huì)被忽略。然而如果自定義屬性(變量)的值無效，它并不會(huì)被忽略，從而會(huì)導(dǎo)致該值被覆蓋為默認(rèn)值。

JavaScript 中的值

// 獲取一個(gè) Dom 節(jié)點(diǎn)上的 CSS 變量
element.style.getPropertyValue("--my-var"); //  MDN上給的，但獲取一直是空的，其他兩個(gè)倒是沒問題

// 獲取任意 Dom 節(jié)點(diǎn)上的 CSS 變量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一個(gè) Dom 節(jié)點(diǎn)上的 CSS 變量
element.style.setProperty("--my-var", jsVar + 4);

主題切換

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      :root {
        --bg: #000;
        --fontSize: 25px;
      }
      .pink-theme {
        --bg: hotpink;
      }
      body {
        transition: background 1s;
        background: var(--bg);
      }
      button {
        position: fixed;
        top: 50%;
        left: 50%;
        transition: color 1s;
        transform: translate(-50%, -50%);
        padding: 20px;
        border: none;
        background: #fff;
        font-size: var(--fontSize);
        color: var(--bg);
      }
    </style>
  </head>
  <body>
    <button>點(diǎn)擊切換</button>
    <script>
      document.querySelector("button").addEventListener("click", () => {
        if (document.body.classList.contains("pink-theme")) {
          document.body.classList.remove("pink-theme");
        } else {
          document.body.classList.add("pink-theme");
        }
      });
    </script>
  </body>
</html>

到此這篇關(guān)于CSS變量實(shí)現(xiàn)主題切換的方法的文章就介紹到這了,更多相關(guān)CSS主題切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • 基于Css Variable的主題切換完美解決方案(推薦)

    這篇文章主要介紹了基于Css Variable的主題切換完美解決方案，本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參
    2020-06-18

  • 詳解如何簡單實(shí)現(xiàn)CSS主題的切換

    這篇文章主要介紹了詳解如何簡單實(shí)現(xiàn)CSS主題的切換，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)
    2020-06-15

  • 初步認(rèn)識(shí)css自定義屬性

    今天，CSS預(yù)處理器是Web開發(fā)的標(biāo)準(zhǔn)。 預(yù)處理器的一個(gè)主要優(yōu)點(diǎn)是它們使您能夠使用變量， 這有助于您避免復(fù)制和粘貼代碼，并簡化了開發(fā)和重構(gòu)。今天通過本文給大家分享如何將
    2018-11-14

  • 關(guān)于CSS自定義屬性與前端頁面的主題切換問題

    這篇文章主要介紹了CSS自定義屬性與前端頁面的主題切換,CSS自定義屬性在一個(gè)css選擇器內(nèi)部進(jìn)行定義，使用兩個(gè)短橫連接線 -- 作為開頭命名的名稱即被稱為自定義屬性，本文結(jié)
    2022-03-21

最新評論