最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

Day 3 – CSS Variables

XAMPP下载 admin 547浏览 0评论
 成品連結:CSS Variables

第三天我們要來利用 JS 操作 CSS,同時也會用到 CSS 內建的變數功能 (類似 SASS/SCSS 的變數功能)。

事前準備
步驟
監聽各個元素
當 input 改變時重新渲染 html
HTML & CSS 程式碼

開始寫程式碼
使用 CSS 變數
這裡可以看到在 CSS 使用了變數,但要注意較舊的瀏覽器可能會有支援度的問題(像是 IE 就完全不支援)

/* 宣告變數 */
:root {
–base: #ffc600;
–blur: 10px;
–padding: 10px;
}

/* 使用變數 */
img {
padding: var(–padding);
background-color: var(–base);
filter: blur(var(–blur));
}
使用時要先用:root這個選擇器,其實就等於選擇了html tag,宣告時要再變數前加上–;而使用時要用var()包住該變數

加上 javaScript
這裡使用了三個input來控制padding、blur、以及base,所以我們要來監聽當 handler 值改變時的事件;事件的選擇可以使用change,但缺點是要等鬆開滑鼠按鍵後才會觸發事件,沒辦法隨著拖曳時改變畫面狀態,但我後來發現input可以做到!不只可以用在range,也能用在其它類型的input上,可以在下方參考資料[4]看更多介紹。

const inputs = document.querySelectorAll(‘.controls input’);

// 分別在各個 input 設定監聽事件
inputs.forEach(cur => {
cur.addEventListener(‘input’, function(e) {
// code here
});
});
接著我們要讀取input[type=”range”]以及input[type=”color”]的值。在 html 中可以看到我們已設定最大、小值 & 預設值,並透過element.value來讀取值

inputs.forEach(cur => {
cur.addEventListener(‘input’, function(e) {
// 讀取 input 中的值並儲存在變數 value 中
let value = cur.value;
});
});
接著判斷如果選擇的是blur、padding或是base,會分別改變 CSS 變數中的值,這裡透過setProperty來修改 CSS 變數內容

inputs.forEach(cur => {
cur.addEventListener(‘input’, function(e) {
// 讀取 input 中的值並儲存在變數 value 中
let value = cur.value;
// 判斷 input 的 id 並改變 CSS 變數的內容
if(e.target.getAttribute(‘id’) === ‘base’) {
document.body.style.setProperty(‘–base’, `${value}`);
} else if (e.target.getAttribute(‘id’) === ‘blur’) {
document.body.style.setProperty(‘–blur’, `${value}px`);
} else if(e.target.getAttribute(‘id’) === ‘spacing’) {
document.body.style.setProperty(‘–padding’, `${value}px`);
}
});
});
到這裡程式已可正常運作啦~接下來如果要再改進我覺得可以修改一下寫法寫得簡潔一些,不然重複的 code 其實有點多有點糙啊…

转载请注明:XAMPP中文组官网 » Day 3 – CSS Variables

您必须 登录 才能发表评论!