Neil coding之路

CSS code:

:root  /* css宣告變數 */
{
    --spacing:10px; 
    --blur:10px;
    --base:#ffc600;
}
img
{
    padding: var(--spacing); /*內填充*/
    background-color: var(--base); /*背景顏色*/
    filter: blur(var(--blur)); /*濾鏡設為blur(模糊)*/
}
.hl
{
    color:var(--base); /*文字顏色*/
}

javascript code:

var inputlist=document.querySelectorAll(".controls input"); //抓取class=controls input標籤
inputlist.forEach((val)=>val.addEventListener("change",change)); //把每個input標籤都增加chage事件
inputlist.forEach((val)=>val.addEventListener("mousemove",change));//把每個input標籤都增加mousemove事件
function change()
{
   var suffix=this.dataset.sizing||''; //取得dataset值
   document.documentElement.style.setProperty(`--${this.name}`,this.value+suffix); //設定css變數的值
}

所用技術:css 變數 forEach dataset arrow function EventListener

demo: Javascript30