整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
ode
HTML頁面開發中，我們常常會設置很多樣式和效果，寫很多CSS樣式。一般情況，對于像我這種對前端不熟的菜鳥，很多樣式都是一點一點調出來，然后就放在css文件中。這樣對于常做Java后端開發接受不了太多魔法值的人來說，總感覺css中給各種dom設置固定的尺寸、位置或距離等，心里很不舒服。
假設有這樣一個場景，我們有兩個dom（A和B），A的寬度為100px，B的寬度為500-A的寬度。在某個條件下，A的寬度要調整為120px，B仍為500-A的寬度。那么最笨的辦法就是在js事件中先改變A的寬度后，接著再調整B的寬度，需要兩步。
jquery 設置dom寬度
現在，我們有了CSS自定義屬性，在css文件中這樣定義自定義屬性
css自定義屬性聲明
然后可以像變量一樣使用
使用css自定義屬性設置寬度
那么回到上面那個場景，我們只需要在js事件中改變自定義屬性的值即可，如下圖
js中改變css自定義屬性
當然，以上只是一種場景，有了自定義屬性可以解決很多問題，比如動態調整主題。感興趣的同學可以研究研究。
文來自 Advanced CSS Theming with Custom Properties and Javascript - (https://www.sitepoint.com/css-theming-custom-properties-javascript/)
在關于CSS主題的本教程中，我們將使用CSS自定義屬性（也稱為CSS變量）來為簡單的HTML頁面實現動態主題。 我們將創建暗色和亮色的示例主題，然后編寫JavaScript在用戶點擊按鈕時在這兩者之間切換。
就像在典型的編程語言中一樣，變量用于存儲值。 在CSS中，它們通常用于存儲顏色、字體名稱、字體大小、長度單位等。它們可以在樣式表中的多個位置重復使用。 大多數開發者都稱呼為“CSS變量”，但官方名稱是“自定義屬性”。
CSS自定義屬性可以修改在整個樣式表中引用的變量。 以前，只有使用Sass等CSS預處理器才能實現這一點。
在創建動態主題示例之前，讓我們先來了解一下自定義屬性的基礎知識。
自定義屬性是一個名稱以兩個連字符（ - ）開頭的屬性，如--foo。 它們定義了可以使用var（）來引用的變量。 讓我們看看下面的例子：
在 :root 選擇器中定義自定義屬性意味著它們可以在全局文檔空間中應用于所有元素。 :root 是一個CSS偽類，它匹配文檔的根元素 - <html>元素。 它類似于html選擇器，但具有更高的特異性。
你可以在文檔中的任何位置訪問 :root 自定義屬性的值：
你也可以預設一個備用值，例如
如果自定義屬性沒有定義的話，備用值將被使用。
在除了:root或html選擇器之外的CSS選擇器內定義定義屬性可以使變量用于匹配元素及其子元素。
諸如Sass之類的CSS預處理器通常用于輔助前端Web開發。 預處理器的有用功能中就包括了變量。 但是Sass變量和CSS自定義屬性之間有什么區別呢？
讓我們開始給項目新建一個文件夾：
接著，在文件夾中新建一個index.html:
然后寫入以下代碼：
我們添加了一個使用<nav>標簽的導航欄，一個頁腳和一個用<div>包裹著的按鈕（用于在明暗主題之間切換）還有一些虛擬的Lorem Ipsum文本。
現在讓我們來寫樣式。在同一個文件的<head>里創建<style>標簽并添加以下代碼：
CSS3的HSL（色調，飽和度，亮度）表示法用于定義顏色。 色調是色環上的角度，示例所使用的350表示紅色。 通過更改飽和度（顏色百分比）和亮度（百分比），所有頁面的顏色都會出現不同的變化。
使用HSL能讓我們只需更改色調值，即可輕松嘗試主題的不同主色調。 我們還可以使用CSS變量作為色調值，并通過更改樣式表中的單個值或使用JavaScript來切換顏色主題。
以下是這個頁面的截圖：
讓我們使用CSS變量來保存頁面中所有顏色的色調值。 在<style>標簽的頂部添加一個:root選擇器來添加一個全局CSS變量：
接下來，我們用-main-hue變量來替換掉所有hsl（）中寫死的350值。 例如，這是導航選擇器：
現在，如果你要指定除紅色以外的任何顏色，則只需將相應的值賦給--main-hue即可。 這是一些例子：
我們定義了紅、藍、綠3種自定義屬性，然后把--red-hue賦值給--main-hue。
以下是3種不同--main-hue值的頁面截圖：
CSS的自定義屬性提供了這幾個好處：
使用JavaScript從一組預定義值或用戶提交的hue值（它應該在0到360之間）中來動態設置--main-hue的值，我們可以為用戶提供許多彩色的主題。
例如以下的代碼可以將--main-hue的值設置為240（藍色）：
現在，讓我們來為這個頁面提供一個暗色的主題。 為了更好地控制不同實體的顏色，我們需要添加更多的變量。
通過頁面的樣式，我們可以在:root中定義相應顏色的自定義屬性后，用變量替換不同選擇器中的所有HSL顏色：
使用適當的自定義屬性名稱。 例如， - nav-bg-color是指導航背景的顏色，而--nav-text-color是指導航前景/文本的顏色。
現在復制粘貼:root選擇器及其內容，然后添加一個暗色的主題屬性：
如果將具有暗色值的主題屬性添加到<html>元素，此主題就會被激活。
我們現在可以手動地通過降低HSL顏色的亮度值來提供暗色主題，或者我們也可以使用其他技巧，例如invert( )和brightness( )等這些常用的CSS濾鏡來調整圖像的渲染，也可以與其他任何元素一起使用。
將以下代碼添加到:root [theme ='dark']：
invert( )濾鏡會反轉所選元素中的所有顏色（在例子中為每個元素）。 可以使用百分比或數字來指定反轉值。 值為100％或1時將完全反轉元素的色調、飽和度和亮度值。
brightness( )濾鏡會使元素更亮或更暗。 值為0時會出現完全黑暗的元素。
invert( )濾鏡會使一些元素非常明亮。 可以通過設置brightness(0.6)來調低亮度。
不同暗度的暗色主題截圖：
現在，當用戶點擊Dark / Light按鈕時，我們來使用JavaScript在暗色和亮色主題之間切換。 在index.html中，在<body>標簽的底部添加<script>內聯腳本，然后加入以下代碼：
Document.documentElement指向文檔的根DOM元素 - 即<html>。 此代碼使用.hasAttribute( )方法檢查主題屬性是否存在，如果該屬性不存在則添加暗色值，然后就會切換到黑暗主題。 否則，它會刪除該屬性，從而切換到亮色主題。
使用JavaScript來改變CSS自定義屬性
通過使用JavaScript，我們可以訪問自定義屬性并動態更改其值。 在我們的示例中，我們將亮度值寫死了，但它可以被動態更改。 首先，在HTML中dart/light按鈕的旁邊添加滑塊：
滑塊的初始值為1，允許用戶調到最低0.3。
接下來，在:root[theme='dark']中添加一個暗度的自定義屬性，初始值為1：
在brightness濾鏡中用此自定義屬性替換掉原先的固定值：
最后，添加以下JavaScript代碼控制滑塊的值來動態地改變--theme-darkness的值：
我們監聽滑塊的事件變化，并使用setProperty( )方法相應地設置--theme-darkness的值。
我們還可以將brightness濾鏡應用于亮色主題。 在:root選擇器添加--theme-darkness自定義屬性：
然后在同一個選擇器內添加brightness濾鏡：
以下是暗色主題最終結果的截圖：
還有亮色主題最終結果的截圖：
在本教程中，我們已經了解了如何使用CSS自定義屬性來創建主題并在它們之間動態切換。 我們使用了HSL配色方案，它允許我們指定具有色調、飽和度和亮度值的顏色以及CSS濾鏡（invert和brightness）以創建亮色主題的暗色版本。
即將到來的Windows 10創作者更新當中，微軟再次為Edge瀏覽器添加了許多新特性，其中就包括對CSS自定義屬性的支持。
微軟最新確認，EdgeHTML 15.15061中已經增加了對CSS自定義屬性的支持，并將在創作者更新當中正式推出。
微軟表示，以往開發者都是使用SASS或者LESS這樣的編輯器來處理Edge瀏覽器中的CSS，但這些工具有一個共同的缺點，開發人員想要更改一些變量的時候就必須要重新編譯樣式表。
而當Edge瀏覽器支持CSS自定義屬性之后，雖然表面上看起來并沒有太多改變，但其實卻是一個新的原始值類型，允許跨CSS屬性完全級聯變量，直接通過JavaScript進行交互。
同時微軟還希望CSS自定義屬性能夠在Blink、Gecko和Webkit內核瀏覽器之間實現互操作，并藉此提高Web開發效率。
微信公眾號搜索"驅動之家"加關注，每日最新的手機、電腦、汽車、智能硬件信息可以讓你一手全掌握。推薦關注！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
