2. 程式人生 > 其它 >javascript 控制css從而實現更換頁面主題顏色

javascript 控制css從而實現更換頁面主題顏色

阿新 • • 發佈：2021-01-28

技術標籤：htmlcssjavascripthtml5js

更換頁面主題顏色

css中是存在變數的，但是相容性不是理想，可以配合js完成頁面主題顏色切換功能，程式碼如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <
 
title>Document</title>
  <style>
    body {
      /* -- 符號為css中宣告變數 */
      --themeColor: #000;
      --borderColor: #fbb50e;
    }
    .box {
      width: 100px;
      height: 100px;
      /* var() 使用變數 */
      background-color: var(--themeColor);  /* 設定背景色 */
      border: 5px solid var(--borderColor)
 
;  /* 設定邊框顏色 */
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <button onclick="fun()">變更主題顏色</button>
  <script>
    function fun(){
      // 修改變數中的顏色
      document.body.style.setProperty('--themeColor', '#ff0000');
      document.
 
body.style.setProperty('--borderColor', '#350efb');
    }
  </script>
</body>
</html>

修改主題顏色的方式有很多，如果可以不考慮瀏覽器的相容性，這種辦法是比較簡單的

相關推薦

javascript 控制css從而實現更換頁面主題顏色

技術標籤：htmlcssjavascripthtml5js 更換頁面主題顏色 css中是存在變數的，但是相容性不是理想，可以配合js完成頁面主題顏色切換功能，程式碼如下

WordPress用JavaScript和CSS實現二級選單展開手風琴效果

[ wordpress中有很多外掛來實現二級選單，比如wordpress外掛 ： 利用Max Mega Menu實現二級選單的伸縮，不過，如果要簡單地實現二級選單展開手風琴效果，可以用下面的程式碼，不過得自己定位到一級選單，定位方法如下

uniapp開發小程式實現滑動頁面控制元素的顯示和隱藏效果

前言 實現思路：通過小程式API中的觸控事件，配合CSS來實現元素的顯示和隱藏。ps（也想過另一種通過監聽頁面滾動的方式來實現，不過效果一定很差0.0）

jupyter notebook更換面板主題的實現

jupyter notebook更換面板主題 視訊地址：https://www.bilibili.com/video/BV1Et4y1D7ru/ 您是否厭倦了jupyter notebook的預設主題呢？

javascript實現簡單頁面倒計時

本文例項為大家分享了javascript實現簡單頁面倒計時的具體程式碼，供大家參考，具體內容如下

JavaScript中sharedWorker 實現多頁面通訊的例項詳解

是這樣的，今天玩github，先是在沒有登入瀏覽了一些頁面，然後在某一頁面進行了登入。這時再切換程式設計客棧的其他頁面時就看到了下面的提示：

JavaScript+html實現前端頁面隨機二維碼驗證

分享炫酷的前端頁面隨機二維碼驗證，供大家參考，具體內容如下 直接上程式碼

JavaScript+html實現前端頁面滑動驗證

本文例項為大家分享了javascript+html實現前端頁面滑動驗證的具體程式碼，供大家參考，具體內容如下

JavaScript+html實現前端頁面滑動驗證（2）

本文例項為大家分享了炫酷的前端頁面滑動驗證的具體程式碼，供大家參考，具體內容如下

JS、CSS和HTML實現註冊頁面

一個用HTML和實現的註冊頁面模板，廢話不多說了，上程式碼！ 更新：使用實現使用者名稱和密碼錶單校驗功能。

JavaScript實現更換頭像功能

本文例項為大家分享了實現更換頭像功能的具體程式碼，供大家參考，具體內容如下

引用JavaScript html css 實現圓的碰撞

我們要實現的效果是當紅球碰到黃球時，黃球變黑色。 第一：先通過html 和頭部css實現兩個球，一個是紅球，一個是黃球。

JavaScript控制頁面全屏

function fullScreenFun() { var iFullscreen = false; //當前是否全屏狀態 var fullscreenEnabled = document.fullscreenEnabled ||

JavaScript+css+HTML實現移動端輪播圖（含原始碼）

目錄1.移動輪播圖2.案例分析3.關於anime.1.移動輪播圖 移動端輪播圖與PC段輪播圖，在技術選擇上是有區別的，因為移動端的瀏覽器版本非常好，對於H5和3的支援非常完美，所以很多效果可以CSS3的方式實現，比如可以使用

淺析前端一鍵換膚5種方案：css樣式覆蓋、實現多套css主題、css自定義變數實現、webpack-theme-color-replacer外掛實現自定義主題色、UI框架自定義主題功能

一、css 樣式覆蓋實現 1、核心：通過切換 CSS 選擇器的方式實現主題樣式的切換

3. Sentinel原始碼分析— QPS流量控制是如何實現的？

終於在這周內寫了一篇原始碼解析，每週一篇即使再忙也不能打破 Sentinel原始碼解析系列：

Java Web實現登入頁面驗證碼驗證功能

一、驗證碼 驗證碼本質上是一張圖片，圖片內容會隨著程式的執行而隨機生成

Android日曆控制元件的實現方法

本文例項為大家分享了Android日曆控制元件的實現程式碼，供大家參考，具體內容如下

Android通過ViewModel儲存資料實現多頁面的資料共享功能

通過ViewModel實現的資料共享符合Android的MVC設計模式，將資料獨立出來 實現的Demo

mysql多版本併發控制MVCC的實現

事務隔離級別設定 set global transaction isolation level read committed; //全域性的 set session transaction isolation level read committed; //當前會話