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 ⊙ )！