CSS variables with JS

今天是css變數的應用方式，成品如下方：

以及個人codepen

css本身可以像sass、scss一樣有變數功能，在全局:root設定的話，就可以在任何地方使用var(你設定的變數名稱)去取用，如下：

:root {
  --bg: #111;
}
body {
  background: var(--bg);
}

技巧點

1. input、change的事件監聽

• 用querySelectorAll選取器，可以直接選到所有的input標籤．並利用forEach迴圈的方式綁定事件監聽．

const inputs = document.querySelectorAll("input[type]");

inputs.forEach((input) => {
  input.addEventListener("input", setProperty);
})
inputs.forEach((input) => {
  input.addEventListener("change", setProperty);
})

• 根據事件的差異，選擇想要的效果，如果是希望操作過程同時看到效果，就可以用input．

2. getComputedStyle(元素, 偽元素)

()中的參數，第一個為必須要放入的，你想要得到哪一個元素的css所有屬性，第二個是可選擇性的，這邊不會操作到偽元素，所以不代入．

const ooxx = window.getComputedStyle(document.documentElement);

• ooxx會得到一個物件，裡面包含了此元素所有的css屬性
• 得到的css屬性，包含了寫在行內樣式，外在的style sheets，繼承的樣式，瀏覽器預設的樣式，全部都在裡面了，好棒～(可參考codepen中的console.log)

window.getComputedStyle(element, null);
const defalutPadding = window.getComputedStyle(document.documentElement).getPropertyValue("--pd");
// 取得整個文件的元素，並且我在：ｒｏｏｔ有設置css變數--pd．

• 起手式，看你想要取得哪一個元素的屬性資料，就把該元素放在element的位置．null的位置則是可選擇性要不要帶入的偽元素pseudo．
• getPropertyValue()，可以帶入你想要得到哪一個css屬性或者是自定義的css變數值．

document.documentElement.style.setProperty('--pd', `${1 * e.target.value / 10}px`);

• setProperty()去設置css屬性，前面參數是要設置的css屬性名稱，後面則是要設定的值．

心得

用了一個比較麻煩的方式去動態更動css屬性，其實只要取得input的值，然後直接對該元素去寫style的樣式就快很多哈哈

因為知道了這個getComputedStyle屬性，想練習看看，就拿來用了．