JavaScript30 - 3.CSS Variables

❤️ javascript30是一系列的視頻教程，旨在30天編寫30個前端小項目。 這些項目不須要使用其餘lib,不須要編譯，不須要模板，迴歸最純真的JavaScript；

🐶 🐶 🐶

🐚 這是這個系列的第三篇

• 1. Drum Kit
• 2.JS + CSS Clock
• 3.CSS Variables

項目代碼同步更新在男同交友網

項目簡介

學會使用CSS變量，經過進度條和顏色選擇來控制變量的值觸發JS事件，從而達到改變樣式的效果

新知識點複習 🐶（附連接）

CSS

CSS Variables:

CSS 變量當前有兩種形式：

• 變量，就是擁有合法標識符和合法的值。能夠被使用在任意的地方。能夠使用var()函數使用變量。例如：var(--example-variable)會返回--example-variable所對應的值
• 自定義屬性。這些屬性使用--*where*的特殊格式做爲名字。例如--example-variable: 20px;即便一個css聲明語句。意思是將20px賦值給--example-varibale變量。

注意：在以前的標準中，自定義屬性以var-做爲前綴，後來才改爲--前綴。Firefox 31和之後的版本遵循新標準
MDN的🌰：

:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}複製代碼

ISUX譯我爲css變量狂
引人矚目的 CSS 變量（CSS Variable）

Can I Use ?

• :root

  :root 僞類匹配文檔樹的根元素。應用到HTML，:root 即表示爲元素，除了優先級更高外，至關於html標籤選擇器

語法：

:root { 樣式屬性 }複製代碼

使用 CSS變量 的時候，聲明全局CSS變量時 :root 很是實用

結構性僞類選擇器
:root | CSS屬性參考

JS

• document.documentElement MDN -documentElement
• mousemove event 事件類型一覽表-mousemove

代碼實踐 ✅

設置和使用變量:

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

監聽事件 😁，觸發的時候改變變量值：

const selects = document.querySelectorAll('.content input');

function handleUpdate() {
  const suffix = this.dataset.sizing || '';
  document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}

selects.forEach(item => item.addEventListener('change', handleUpdate));
selects.forEach(item => item.addEventListener('mousemove', handleUpdate));複製代碼

但願你們也多聯繫一下，雖然看起來很簡單，可是天天花一點時間鞏固一下基礎也不錯 ( ⊙ o ⊙ )！