【JS30-3】Playing with CSS Variables and JS

閱讀時間約 1 分鐘
raw-image


JavaScript30 傳送門:https://javascript30.com/


透過 JS 控制 CSS 變數


今天的挑戰是要能透過滑動圖片上面的 <input type="range"> 來改變圖片的三個屬性。

以前在 CSS 裡面看到 var(--xxxx) 這種東西都很陌生害怕,但做完這個挑戰之後不會了!

<style>
:root { 
--base: #ffc600; 
--spacing: 10px;
--blur: 10px;
}

img {
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur));
}
</style>


透過 document.documentElement.style.setProperty() 可以重新對變數賦值。

document.documentElement.style.setProperty('--spacing', `${e.target.value}px`)


現在我也是會用 CSS 變數的人了!哇哈哈哈

    1會員
    3內容數
    肚子餓了
    留言0
    查看全部
    發表第一個留言支持創作者!