JS - 003 - CSS variables

003

＋ 主題 - 用 javascript 調整 CSS variables

github連結

+ 邏輯 - 

1. 監聽所有的input，當發生改變時，調整圖片css
2. 取得value，加上單位，單位儲存在dataset。沒有dataset的顏色選擇器，則是空白，不取得單位。
3. input當發生change時會觸發函式，滑軌拖曳是先監聽mousedown再監聽mousemove再觸發函式，滑鼠拖曳完畢mouseup時，將停止監聽mousemove（顏色選取不能被mousemove影響）

＋ 其他筆記 -

1. 預處理器進入線上環境後，是不能調整css，所以是css variables的優勢。
2. input的type range

• 實際數字不重要
• default:0~100
• like a slider control
• 可以設置最大最小值max, min
• value是起始值

＋ JS語法筆記 -

// style.setproperty() : 
在js中，物件可以用['']去設定屬性，可以用字串或變數組合。
.style有很多可控制的屬性，像是.style['color']='red';
但是如果不是內建的屬性，這個方式不能去設定css的變數！
如果要用js去控制css必須要用setproperty('name','value')

+ 實作技巧 -

1. 在抓取sizing時，一般來說會這樣寫

但重複很多次，也可以改成這樣

如果要更精簡，可以寫成這樣

2.

3.監聽事件

change是針對選取顏色，mousedown的時候才會去監聽mousemove, click，mouseup取消監聽