Please enable JavaScript.
Coggle requires JavaScript to display documents.
Day-3: playing css variables and JS (css變數 (DATA-DRIVEN 資料控制畫面, 優點…
Day-3: playing css variables and JS
css變數
DATA-DRIVEN
資料控制畫面
優點:可一次修改畫面上所有要變的樣式
缺點:寫程式時看不到資料
js作法:直接操控DOM
缺點:要改變很多畫面時要寫很多次
CSS變數的設定
:root
document.documentElement
document.querySelector(':root')
document.querySelector('html')
CSS變數如何透過js抓取?
d.style.setProperty('propertyName','propertyValue')
.d.style['filter']='propertyValue'
如何設定css變數屬性&屬性值=DOM物件屬性&屬性值?
直接讓DOM物件屬性=css變數的屬性
使用dataset物件在DOM上設定data屬性值
值改變時變換樣式
及時操作(mousemove)
選完才做(change)
使用js直接抓取&透過css變數改變再抓的好壞?