Day03 - CSS 變量

時間 2021-02-14

標籤 javascript css html java git github 數組微信框架函數欄目 CSS 简体版

原文原文鏈接

Day03 - CSS 變量

做者：©liyuechun
簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用。如今你看到的是這系列指南的第 3 篇。完整指南在從零到壹全棧部落。javascript

實現效果

用 JavaScript 和 CSS3 實現拖動滑塊時，實時調整圖片的內邊距、模糊度、背景顏色，同時標題中 JS 兩字的顏色也隨圖片背景顏色而變化。css

涉及特性

:roothtml
var(--xxx)：CSS 變量（CSS Variables）java
filter: blur()git
事件 change、mousemovegithub

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 ，添加鼠標滑過期的事件監聽
編寫處理更新操做的方法
1. 獲取參數值後綴
- 獲取參數名（blur、spacing、color）
- 獲取參數值（12px、#efefef）
- 賦值給對應的 CSS 變量

基礎知識

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');
```