国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

網頁自定義主題色方案

Gu_Yan / 1798人閱讀

摘要：補充說明雖說是的方法，但是目前等主流方法也都支持，可以放心的使用而另一方面也支持及以上。進行本地存儲通過變量實現這個方法就簡單很多，不過開發前請先了解其兼容性，開發時主題色相關顏色直接調用變量，就像大家平時用一樣。

前言 
大家應該見過不少可以更換主題或主題顏色的網站，如果是更換內置的幾套方案可以直接通過簡單的替換css文件來實現，我們就不說了；本文就介紹一種用戶自定義替換的主題題色的簡單方案！
1. 相關知識點 1.1 CSSStyleSheet.insertRule() 
CSSStyleSheet.insertRule(rule, index);

參數：

rule: string,包含要插入的樣式規則

index: number, 插入的位置, 可選，默認:0

document.styleSheets[0].insertRule(".selector {color: red}", 0);
1.2 CSSStyleSheet.addRule() 
CSSStyleSheet.addRule(selector, cssText, index)

參數：

selector: string,選擇器文本

rule: string,包含要插入的樣式規則

index: number, 插入的位置, 可選，默認:length - 1

document.styleSheets[0].addRule(".selector", "color: red", 0);

關于insertRule與addRule的區別

addRule是IE專用的方法

傳參略有不同，并且insertRule默認將樣式規則添加到css的第一條，而addRule默認添加到最后一條。

補充說明：雖說addRule是IE的方法，但是目前chrome等主流方法也都支持，可以放心的使用；而另一方面insertRule也支持IE9及以上。

1.3 CSS3變量

可以讓我們像Sass、Less那樣創建變量；

:root{
  --color: pink;
}
div{
  color: var(--color);
}
.content{
  --red: red;
  --string: "支持字符串";
  --中文名: 20;
  background-color: var(--red);
}

遺憾的是目前不支持IE，不過可以用JS來判斷

varisSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports("--a", 0);

if (isSupported) {
  /* supported */
} else {
  /* not supported */
}

更多關于css3變量: 請點這里

2. 具體方案 2.1 通過insertRule/addRule 實現 
    function setTheme(color){
        let link = document.createElement("style");
        let head = document.getElementsByTagName("head")[0];

        //設置主題色時現將原先的樣式文件移除，雖然樣式之間可以覆蓋，但為了避免添加過多，還是清一下。
        document.getElementById("theme") && head.removeChild(document.getElementById("theme"));
        link.rel = "stylesheet";
        link.type = "text/css";
        link.id = "theme";
        head.appendChild(link);

        let themeData = {
          color: color,
        };

        let len = document.styleSheets.length - 1;
        
        //進行本地存儲
        localStorage.setItem("Theme", JSON.stringify(themeData));
        document.styleSheets[len].addRule(".T-BG", `background-color: ${this.color} !important`);
        document.styleSheets[len].addRule(".T-FT", `color: ${color} !important`);
        document.styleSheets[len].addRule(".T-FT-H:hover", `color: ${color} !important`);
        document.styleSheets[len].addRule(".T-BD", `border-color: ${color} !important`);
        document.styleSheets[len].addRule(".T-SD", `box-shadow: 0 0 5px 1px ${color} !important`);
        document.styleSheets[len].addRule(".T-SD-H:hover", `box-shadow: 0 0 5px 1px ${color} !important`);
        document.styleSheets[len].addRule(".T-TSD-H:hover", `text-shadow: 0 0 5px ${color} !important`);
        document.styleSheets[len].addRule(".T-TSD", `text-shadow: 0 0 5px ${color} !important`);
    }
2.2 通過css3變量 實現 
    //這個方法就簡單很多，不過開發前請先了解其兼容性，開發時主題色相關顏色直接調用變量，就像大家平時用Sass一樣。
    
    function setTheme(color){
        // 設置變量，
        document.body.style.setProperty("--ThemeColor", "red");
    }

如果大家還有什么比較好的方案也希望留言多多分享

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102150.html

相關文章

  • 網頁自定義主題色方案

    摘要：補充說明雖說是的方法，但是目前等主流方法也都支持，可以放心的使用而另一方面也支持及以上。進行本地存儲通過變量實現這個方法就簡單很多，不過開發前請先了解其兼容性，開發時主題色相關顏色直接調用變量，就像大家平時用一樣。 showImg(https://segmentfault.com/img/bVbo0Mb?w=1105&h=806); 前言 大家應該見過不少可以更換主題或主題顏色的網站，...

    fasss 評論0 收藏0

  • 網頁自定義主題色方案

    摘要：補充說明雖說是的方法，但是目前等主流方法也都支持，可以放心的使用而另一方面也支持及以上。進行本地存儲通過變量實現這個方法就簡單很多，不過開發前請先了解其兼容性，開發時主題色相關顏色直接調用變量，就像大家平時用一樣。 showImg(https://segmentfault.com/img/bVbo0Mb?w=1105&h=806); 前言 大家應該見過不少可以更換主題或主題顏色的網站，...

    loostudy 評論0 收藏0

  • 您的【用戶體驗優化方案】到了，請簽收~

    摘要：暴露年齡了廣告詞飯后嚼兩粒大概，故事性很強，比較有意思同時直入主題，飯后吃益達口香糖有益健康。書里破繭成蝶說道，揣摩用戶的心思遠遠不夠，你不可能完整的想到別人在想什么，所以還需要去體驗用戶的生活。 用戶體驗（User Experience，簡稱UX 或是UE），它指用戶在使用一個產品、系統或者服務時建立起來的純主觀感受。 showImg(https://segmentfault.com...

    cheng10 評論0 收藏0

  • 您的【用戶體驗優化方案】到了，請簽收~

    摘要：暴露年齡了廣告詞飯后嚼兩粒大概，故事性很強，比較有意思同時直入主題，飯后吃益達口香糖有益健康。書里破繭成蝶說道，揣摩用戶的心思遠遠不夠，你不可能完整的想到別人在想什么，所以還需要去體驗用戶的生活。 用戶體驗（User Experience，簡稱UX 或是UE），它指用戶在使用一個產品、系統或者服務時建立起來的純主觀感受。 showImg(https://segmentfault.com...

    eternalshallow 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<