JS30 day03 - Update CSS variables

作業內容

今天要做的是做出一個網頁，裡面有張圖片，上面有兩個滑桿，一個選顏色的欄位，隨便改變其中一個，就會讓圖片的顏色 / 模糊度 / padding 跟著改變

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>

<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">

CSS:

:root{
  --base: #ffc600;
  --spacing: 10px;
  --blur: 10px;
}
img{
  padding: var(--spacing);
  background-color: var(--base);
  filter: blur(var(--blur));
}
.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 handleUpdate(){
  const suffix = this.dataset.sizing || '';
  document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix)
}
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

學到什麼

列點如下：

HTML
1. 之前都沒有機會用到 type 是 range 的 input，這次終於知道可以做什麼了！然後需要用 min / max 來設定這個 range 的最大最小值
  ex. <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
CSS
1. 變數：這也是第一次真的在 CSS 裡面用到變數，這次使用的方法如下：
1
2
3
4
5
:root{
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
其中 :root 表示在 :root 的範圍內可以使用這些變數，這邊的 root 其實代表 html 的範圍，但真的拿來比較的話，優先層級比 html 更高
除了 :root 之外，可以在 CSS 選擇器之下宣告變數，限縮變數使用範圍，可以參考：https://muki.tw/tech/native-css-variables/

另外呼叫的方法也是有點難記：
1
padding: var(--spacing);
1. 這也是第一次用到 filter 的屬性(也太多第一次)，除了 blur 之外， filter 還可以使用很多不同效果，可以參考：https://www.runoob.com/cssref/css3-pr-filter.html
JS
1. 用 querySelectorAll 拿到的節點很像是 Array 但他不是，它是節點組合(nodeList)，一般的 Array 可以用 map 等方法，但這些節點的組合不行，因此有些人會把這些節點的組合再轉型成陣列
2. this.dataset.sizing 裡面的 dataset 會把這個 node 所有有關 data- 開頭屬性的值，全部拿進來變成 key-value pair
3. document.documentElement 對於一個 html 文件來說，他指的就是 html 標籤
4. style.setProperty 可以對於某個節點增加行內 CSS 屬性，語法如下：style.setProperty(propertyName, value, priority);，所以剛剛這行 document.documentElement.style.setProperty 他在瀏覽器上面看到的結果會是在 html 標籤上直接改變 inline CSS 屬性，可以參考 MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

總結

我覺得在 CSS 中變數的應用會是很多優化使用者體驗的關鍵，所以今天的作業讓我覺得挺有收穫的！

參考資料：
https://github.com/wesbos/JavaScript30

JS30 day3 Update CSS variables

JS30 day03 - Update CSS variables

作業內容

學到什麼

總結

FEATURED TAGS

FRIENDS