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