【JS30-3】Playing with CSS Variables and JS

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 變數的人了！哇哈哈哈