JS30-Day3

2019鐵人賽

James Wu

2018-10-03 13:40:46

1968 瀏覽

分享至

第三天來到囉，今天的內容比較簡單一點，利用js去控制css3的變數數值，進而改變畫面的更新。

Day3

先上demo，這次主要在一張圖片上，用變數去更新padding、background-color以及blur。html部分先設定三個input分別控制剛剛所提到的三項屬性，以及加上一張自己想放的圖片，input上加上data-sizing='px'，是為了js之後去更改數值時，要抓取到的單位名，順帶一提第一次用到type='range'跟type='color'屬性，感覺好特別XD

<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="https://source.unsplash.com/7bwQXzbF6KE/800x500">

css部分：
css將想要寫的變數都放在:root當中，變數名以--作為開頭，而要使用這些變數時，就以var為開頭，後面加上想要的變數名稱，以下為code範例

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

img { 
        padding: var(--spacing);
        background: var(--base);
        -webkit-filter: blur(var(--blur));
        filter: blur(var(--blur)); 
    }

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

js部分：
先選擇到所有的input，然後監聽他們的mousemove跟change事件，如果只監聽change事件的話，在移動range的input時並不會即時的更新畫面，而是要移動完成滑鼠放開值改變後才會更新畫面，所以加上mousemove的監聽。以下為code部分

//選擇所有input
    const inputs = document.querySelectorAll('.controls input');
    function handleUpdate() {
      //這邊的this會指向input，dataset.sizing是自己加在input上的data-sizing
      //改變顏色的input並沒有dataset-sizing這個屬性，所以加上''，如果沒有加會變成undefined，就出錯了
      const suffix = this.dataset.sizing || '';
      //這邊會抓取到<html>，然後設定更改後input的值到html上，進而改變變數的數值
      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
    }
    //將每個input元素監聽change及mousemove事件 都去觸發更新的函示
    inputs.forEach(input => input.addEventListener('change', handleUpdate));
    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

以上就是第三天內容！還剩27天QQ