作者：©liyuechun
簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案原始碼。目的是協助人們用純 JavaScript 來寫東西，不藉助架構和庫，也不使用編譯器和引用。現在你看到的是這系列指南的第 3 篇。完整指南在 從零到壹全棧部落。 實現效果
用 JavaScript 和 CSS3 實現拖動滑塊時，即時調整圖片的內邊距、模糊度、背景顏色，同時標題中 JS 兩字的顏色也隨圖片背景顏色而變化。 涉及特性 :root var(--xxx)：CSS 變數（CSS Variables） filter: blur() 事件 change、mousemove HTML源碼
<h2>Update CSS Variables with <span class='hl'>JS</span></h2> <div class="controls"> <label for="spacing">Spacing:</label> <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px"> <label for="blur">Blur:</label> <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px"> <label for="base">Base Color</label> <input id="base" type="color" name="base" value="#ffc600"> </div> <div class="result"> <div class="showText">{spacing:<label id="label_spacing">#ffc600</label>}</div> <div class="showText">{blur:<label id="label_blur">10px</label>}</div> <div class="showText">{base:<label id="label_base">10px</label>}</div> </div> <img src="http://f.hiphotos.baidu.com/lvpics/h=800/sign=b346032cbe389b5027ffed52b534e5f1/960a304e251f95ca545f8b84ce177f3e6709525d.jpg">
CSS源碼
<style> :root { --base: #ffc600; --spacing: 10px; --blur: 10px; } img { width: 600px; height: 400px; padding: var(--spacing); background: var(--base); filter: blur(var(--blur)); } .hl { color: var(--base); } /* misc styles, nothing to do with CSS variables */ body { text-align: center; background: #193549; color: white; font-family: 'helvetica neue', sans-serif; font-weight: 100; font-size: 30px; } .controls { margin-bottom: 50px; } input { width: 100px; } .result { display: flex; flex-direction: row; justify-content: center; color: var(--base); } .showText { margin: 0px 25px 50px 25px; } </style>
JS源碼
<script> const inputs = document.querySelectorAll('.controls input'); function handleUpdate() { const suffix = this.dataset.sizing || ''; document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); document.getElementById(`label_${this.name}`).innerText = this.value + suffix; } inputs.forEach(input => input.addEventListener('change', handleUpdate)); inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); </script>
過程指南
CSS 部分準備 聲明全域（:root）的 CSS 變數 將變數應用到頁面中對應元素 <img> 處理標題的 CSS 值
JS 即時更新 CSS 值 擷取頁面中 input 元素 給每個 input 添加監聽事件，使其在值變動，觸發更新操作 同 2 ，添加滑鼠滑過時的事件監聽 編寫處理更新操作的方法
NodeList 和 Array 的區別
可以開啟 proto 查看它的方法，其中有 forEach()、item()、keys() 等。而 Array 的 prototype 中有 map()、pop() 等數組才有的方法。
HTML5 中的自訂資料屬性 dataset
HTML5 中可以為元素添加非標準的自訂屬性，只需要加上 data- 首碼，可以隨便添加和命名。添加之後，可以通過元素的 dataset 屬性來訪問這些值，dataset 的值是 DOMStringMap 的一個執行個體化對象，其中包含之前所設定的自訂屬性的“名-值”對。
CSS variable
這是一個 CSS3 的新特性，IE 和 Edge 目前都還不支援。命名寫法是 --變數名，在引用這個變數時寫法是 var(--變數名)。具體執行個體見下一條代碼。
:root 偽類
這個虛擬元素匹配的是文檔的根項目，也就是 <html> 標籤。
所以常用於聲明全域的 CSS 變數：
:root { --color: #fff;}
在使用時：
img { background: var(--base);}
CSS 濾鏡 filter
CSS 的濾鏡提供了一些圖形特效，比如高斯模糊、銳利化、變色等。它帶有一些預設的函數，在使用時加上參數調用這些函數即可。在 Chrome、Firefox 中都支援。 解決痛點
如何處理參數值（一個有 px 、另一個沒有）
運用 dataset 儲存尾碼，有 px 尾碼的標籤中設定 <input data-sizing: px>：
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px"><input type="color" name="base" value="#8aa8af">
JS 中通過 dataset.sizing 來擷取尾碼值：
const suffix = this.dataset.sizing || '';
此時 suffix 擷取到的值，針對顏色為空白，而針對長度類的則為 ‘px’。
如何用 JavaScript 改變 CSS 屬性值。
在 JavaScript 中 document.documentElement 即代表文檔根項目。所以要改變全域的 CSS 變數，可以這樣寫：
document.documentElement.style.setProperty('--base', '#fff');
源碼下載
Github Source Code
| 掃碼申請加入全棧部落 |
|---|
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
