JavaScript 3/30: CSS變量

JavaScript30 爲Wes Bos推出的一項爲期30天的挑戰，旨在幫助人們用純JavaScript來實現效果，初學者若想在JS方面快速精進，不妨一試。本題爲第三題。

實現效果

本題當實現這樣的效果，利用JavaScript及CSS3來改變CSS的值，使得拖動滑塊及選中顏色時，能夠實時調整圖片的內邊距（padding）、模糊度（blur）及背景顏色（background），同時標題中JS二字的顏色也隨之更改。

頁面基礎佈局

<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>

  <img src="DSC01672.jpg">
複製代碼

解題思路有兩種

1、

• 獲取對應input元素；
• 建立changeImg動做，獲取對應input元素的value值，並賦值給圖片的內邊距（padding）、模糊度（blur）及背景顏色（background）；
• 爲每一個input元素添加監聽事件，當發生change或是mouseover動做時，觸發changeImg動做，即時改變顏色或者滑塊值；

查看個人demo及代碼。

2、

• CSS部分
  • 聲明全局CSS變量;
  • 將變量與對應元素<img>、<hl >關聯;
• JavaScript部分
  • 獲取對應input元素;
  • 建立changeImg動做,獲取對應input元素參數名及參數值，賦值給對應CSS變量blur、spacing、color；
  • 爲每一個input元素添加監聽事件，當發生change或是mouseover動做時，觸發changeImg動做，即時改變顏色或者滑塊值。

查看個人demo及代碼。

第一種方法代碼以下：

CSS部分代碼

body {
      text-align: center;
      background: #193549;
      color: white;
      font-family: 'helvetica neue', sans-serif;
      font-weight: 100;
      font-size: 50px;
    }

    img {
      width: 364.8px;
      height: 547.2px;
    }

    .controls {
      margin-bottom: 50px;
    }

    input {
      width: 100px;
    }
複製代碼

JavaScript完整代碼：

const inputs = document.querySelectorAll('.controls input');
    const spacing = document.querySelector('#spacing');
    const blur = document.querySelector('#blur');
    const base = document.querySelector('#base');
    const image = document.querySelector('img');
    const h = document.querySelector('.hl');

    function changeImg() {
      image.style.padding = `${spacing.value}px`;
      image.style.filter = `blur(${blur.value}px)`;
      image.style.background = `${base.value}`;
      h.style.color = `${base.value}`;
    }

    inputs.forEach(input => input.addEventListener('mouseover', changeImg));
    inputs.forEach(input => input.addEventListener('change', changeImg));
複製代碼

知識點

• input標籤中type="range"，呈現效果爲可左右移動的滑動杆，以下所示：

• 使用querySelectorAll('.controls input')得到的 inputs,可返回一個nodelist，與Array有所區別，但一樣能夠用forEach遍歷。
• CSS濾鏡filter，即圖片濾鏡，可調整圖片特效，常見如模糊度blur(),明暗brightness()，對比度contrast()等，能夠一次設置一個濾鏡也能夠同時設置多個濾鏡，具體參考此處。

第二種方法代碼以下：

CSS部分代碼

:root {
      --spacing: 10px;
      --blur: 10px;
      --base: #ffffff;
    }

    img {
      padding: var(--spacing);
      filter: blur(var(--blur));
      background: var(--base);
      width: 364.8px;
      height: 547.2px;
    }

    .hl {
      color: var(--base);
    }

    body {
      text-align: center;
      background: #193549;
      color: white;
      font-family: 'helvetica neue', sans-serif;
      font-weight: 100;
      font-size: 50px;
    }

    .controls {
      margin-bottom: 50px;
    }

    input {
      width: 100px;
    }
複製代碼

JS部分代碼

const inputs = document.querySelectorAll('.controls input');

    function changeImg() {
      const suffix = this.dataset.sizing || '';
      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
    }

    inputs.forEach(input => input.addEventListener('change', changeImg));
    inputs.forEach(input => input.addEventListener('mouseover', changeImg));
複製代碼

解題難點

1.如何處理參數值（前兩個有單位 px 、第三個沒有）

<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<input type="color" name="base" value="#8aa8af">
複製代碼

可見前兩個input元素中，已設置data-sizing: "px",而只要加上 data- 前綴，咱們就能夠運用dataset屬性來訪問全部含有data-的值。在JavaScript中，能夠經過dataset.sizing來獲取單位。

const suffix = this.dataset.sizing || ''; 
複製代碼

表示，針對前兩個參數值的單位爲'px'，針對顏色爲空，以防報錯。

2.如何用 JavaScript 改變 CSS 屬性值？

在JavaScript中，document.documentElement 即表明文檔根元素。因此要改變全局的 CSS 變量，能夠這樣寫：

document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
複製代碼

爲了更好理解setProperty及聯繫解題思路一：

style.setProperty('padding', '15px');
/* 等同於 */
style.padding = '15px';
複製代碼

實際應用中，前者的作法會更方便帶參數進去。

知識點

1.CSS變量

方法二的亮點在於建立了CSS變量，實際上，當咱們須要構建大型站點時，使用CSS變量，能避免代碼冗餘，可重複使用，同時，變量名稱自己包含語義信息，使得CSS文件更易。具體使用方法以下：

聲明一個全局CSS 變量：

:root {
  --global-color: #666;
  --pane-padding: 5px 42px;
}
複製代碼

使用一個全局CSS 變量：

.demo{
   color: var(--global-color);
}
複製代碼

其中:root 表示DOM元件的根元素，至關於<html>，常見於聲明全局CSS變量。關於CSS變量，若想深刻理解，可參閱這裏。

2.模板字符串

關於模板字符串，其實在第一題就有提到，但值得注意的是，在寫法上，是使用反引號``包裹字符串，而非''，記錄一筆，不能再犯，以防小哥哥再嚴肅地批評我！