寫在系列開篇
在學(xué)習(xí)了基本的 HTML / CSS / JavaScript 之后沒有啥 side project 就直接開始學(xué) Angular 做項(xiàng)目惠况。遇到最近很火的JavaScript30這個(gè)項(xiàng)目后決心好好實(shí)踐一下 Vanilla JavaScript。
對于每個(gè)挑戰(zhàn)，我會(huì)自己在看過視頻了解原理后自己實(shí)現(xiàn)一遍并在 blog 里記錄過程楷力、想法和相關(guān)資料趟妥。源碼放在我的 Github上亮曹，demo 通過 Github Pages 部署氛什，點(diǎn)擊這里或 Github 的 readme 中連接可以訪問。
Objective
利用 CSS Variable 和 JS 進(jìn)行樣式屬性的控制片习。
Steps
CSS 部分
- 定義全局 CSS 變量
--spacing, --blur, --base捌肴； - 將 CSS 變量添加到樣式屬性上蹬叭。
JS 部分
- 對每個(gè)
type類型的input標(biāo)簽添加監(jiān)聽器，觸發(fā)事件有moutsemove,change状知； - 更新全局的 CSS 屬性：
document.documentElement.style.setProperty()秽五。
Things learned
CSS Variable
MDN 文檔
一般將 CSS 變量定義在 root element 的 pseudo-class 上，以 '--' 開頭
:root {
--spacing: 10px;
--blur: 10px;
--base: #ffc600;
}
在使用時(shí)只要用 var(--blur) 進(jìn)行調(diào)用即可饥悴。
雖然 Sass/Less 中也有變量坦喘，但其是在編譯期完成綁定，原生 CSS 變量可以在運(yùn)行時(shí)改變西设，功能更強(qiáng)大瓣铣。
<input> tag
MDN The HTML
<input>element is used to create interactive controls for web-based forms in order to accept data from the user. How an<input>works varies considerably depending on the value of its type attribute.
<input> 標(biāo)簽的基本作用是進(jìn)行用戶交互輸入數(shù)據(jù)，根據(jù) "type" 屬性制定輸入類型贷揽，種類非常豐富：
- type=button: link, menuitem, menuitemcheckbox, menuitemradio, radio, switch, tab
- type=checkbox: button, menuitemcheckbox, option, switch
- type=image: link, menuitem, menuitemcheckbox, menuitemradio, radio, switch
- type=radio: menuitemradio
- type=color|date|datetime|email|file|hidden: None
- type=month|number|password|range|research: None
- type=search|submit|tel|text|url|week: None
這個(gè)demo中用到了：
- color: 根據(jù) OS 喚出取色器
- range: 一般用于具體數(shù)值不重要棠笑，可以根據(jù)比例估算的輸入，默認(rèn)值為：
- min: 0
- max: 100
- value: min + (max - min) / 2, min 如果 max < min
- step: 1
