iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
0

啊呀 寫一半忘記存草稿就關電腦了QQ

https://ithelp.ithome.com.tw/upload/images/20181010/20111164oH4vIAF0dI.png

使用者操作需求

分別操作Spacing,Blur滑動桿以及調色盤,來即時變更圖片的padding,filter以及主題色

技術重點

  • 利用JS來控制CSS變數
  • CSS變數設定 :root { --baseColor: yellow }
  • CSS設定變數為值 .className { color: var(--baseColor) }
  • 使用 .dataset.* 取得HTML data-*屬性
  • 返回style標籤 document.documentElement.style
  • 設定CSS屬性 style.setProperty

流程步驟

  1. 利用CSS變數設定樣式
  2. JS選取所有的input控制桿
  3. 對控制桿添加監聽,並且設定兩種觸發事件change & mousemove
  4. 觸發時更新到CSS變數

範例語法備註

[ :root ]

  • CSS變數設定 :root { --baseColor: yellow }
  • CSS設定變數為值 .className { color: var(--baseColor) }
:root {
      --base: #ffc600;
      --spacing: 10px;
      --blur: 10px;
    }

    img {
      padding: var(--spacing);
      background: var(--base);
      filter: blur(var(--blur));
    }

    .hl {
      color: var(--base);
    }

[ element.dataset() ]

HTML5 data-*第一篇有講到
這邊講的是利用.dataset選取對象的data-*屬性,跟getAttribute很像
但是dataset還能抓到data字串,getAttribute試了一下好像無法

<div id="test" data-no="123" data-name="yy" data-time="00:00"></div>

// 輸出 {no: "123", name: "yy", time: "00:00"}
document.querySelector('#test').dataset

// 皆輸出123
document.querySelector('#test').dataset.no 
document.querySelector('#test ').getAttribute('data-no');
  

範例code使用 const suffix = this.dataset.sizing || '';
如果變數不一定取的到值的話可以多加一個空值

[ style.setProperty() ]

等同於 cssPropertyName
style.setProperty('padding', '15px');
style.padding = '15px';

範例code中 將input的name屬性 命名為CSS屬性名稱來做呼應

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

上一篇
JS30 - day02: JS + CSS Clock
下一篇
JS30 - day04: Array Cardio Day 1
系列文
JavaScript 30天11

1 則留言

0
marlin12
iT邦新手 1 級 ‧ 2018-10-05 20:43:39
iT邦新手 5 級‧ 2018-10-15 16:39:14 檢舉

哈哈哈 真希望可以放codepen上來呀~

我要留言

立即登入留言