iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 3
0
Modern Web

JavaScript專案學習筆記系列 第 3

JavaScript專案學習筆記 -以JS操控CSS變數 3/30天

感謝https://javascript30.com/的免費教程

Demo:http://codepen.io/FutureFronterAndy/pen/xRavKj

學習點:

:root{
 --spacing: 10px;
 --blur: 10px;
 --base: #ffc600;
 }
 img{
 padding: var(--spacing);
 background: var(--base);
 filter: blur(var(--blur));
 }
 .hl{
 color: var(--base);
 }

:root:裡頭為CSS選擇器的虛擬類別,CSS中制訂變數的概念
參考:https://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:root

var(--base):CSS中使用變數的方式

const inputs=document.querySelectorAll(".controls input");
 inputs.forEach(input=>input.addEventListener("change",handleUpdate));
 // inputs.forEach(input=>input.addEventListener("mouseover",handleUpdate));
 function handleUpdate(){
 
 const suffix=this.dataset.sizing||'';
 console.log(this.value);
 document.documentElement.style.setProperty(`--${this.name}`,this.value+suffix);

script的流程為抓取所有類別為controls裡的input(共會抓到三個),再透過監聽其input 改變時做handleUpdate。

<input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

this.dataset.sizing:為抓取data-sizing="px",可以將data-改接別的字,ex:data-cool, data-scaling...隨意

document.documentElement.style.setProperty(--${this.name}`,this.value+suffix);

設定property, 因為要有彈性--${this.name}包含scale,base和spacing,而this.value則為數值


上一篇
JavaScript專案學習筆記 -時鐘 2/30天
下一篇
JavaScript專案學習筆記 -陣列方法練習 4/30天
系列文
JavaScript專案學習筆記7

尚未有邦友留言

立即登入留言