在網頁產生三個控制元件<input type="range">
,透過三個元件控制圖片元件的style
變化。
第一個元件控制圖片的padding
內距。
第二個元件控制圖片的background
背景顏色。
第三個元件控制圖片的filter(blur())
濾鏡效果中的模糊。
接下來透過css變數來控制圖片的效果。
css變數在:root
中建立3個變數,並把變數引入給img
元件。
:root {
--base: #ff0000;
--spacing: 10px;
--blur: 10px;
}
img {
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur));
}
而:root
代表著<html>
這個元素。
接下來是在控制元件建立監聽click
,mousemove
事件。
為何要有click
和mousemove
兩個事件,主要目的當點選<input type="range">
並拖移食可以直接改變img
的CSS屬性,但只有'click'事件時,只會觸發按下的動作,之後拖移的動作並不會觸發。
因此特別加入mousemove
事件,當拖移<input type="range">
就有事件觸發。
當控制元件的數值改變時,改變documentElement
的style
屬性。
這時透過this
來取得<input type="range">
的name
和value
,因為此時this
為<input type="range">
。
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix)
這樣就可以透過css變數來控制元件的css屬性。
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<input id="base" type="color" name="base" value="#ff0000">
產生三個控制圖片變化的元件
document.documentElement
Document.documentElement 會回傳目前文件(document)中的根元件(Element),如:HTML 文件中的 元件。
CSSStyleDeclaration.setProperty()
setProperty()是指給予宣告的物件中css的屬性指派新的數值。
The CSSStyle Declaration.setProperty() method interface sets a new value for a property on a CSS style declaration object.
declaration.setProperty('margin', '1px 2px');
string = element.dataset.camelCasedName;
element.dataset.camelCasedName = string;
CSS variables
CSS 變數 是指說css能用變數
來做為輸入值。
CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document.They are set using custom property notation (e.g. --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);). Complex websites have very large amounts of CSS, often with a lot of repeated values. [2]
filter
filter這個屬性能夠改變元件的視覺效果,常用於img
元件。
The filter CSS property lets you apply graphical effects like blurring or color shifting to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.
filter的效果[3]
/* 模糊: */
filter: blur(5px);
/* 亮度 */
filter: brightness(200%);
/* 對比 */
filter: contrast(200%);
/* 陰影 */
filter: drop-shadow(8px 8px 10px red);
/* 轉換成灰階 */
filter: grayscale(50%);
/* 色調迴轉 */
filter: hue-rotate(90deg);
/* 顛倒顏色 */
filter: invert(100%);
/* 透明度 */
filter: opacity(30%);
/* 飽和度 */
filter: saturate(800%);
/* 轉換成棕色 */
filter: sepia(100%);
documentElement
, CSS variables
, dataset