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

day03: CSS Variable

XAMPP下载 admin 533浏览 0评论

QQ截图20181015155957

 使用者操作需求
分別操作Spacing,Blur滑動桿以及調色盤,來即時變更圖片的padding,filter以及主題色

技術重點
利用JS來控制CSS變數
CSS變數設定 :root { –baseColor: yellow }
CSS設定變數為值 .className { color: var(–baseColor) }
使用 .dataset.* 取得HTML data-*屬性
返回style標籤 document.documentElement.style
設定CSS屬性 style.setProperty
流程步驟
利用CSS變數設定樣式
JS選取所有的input控制桿
對控制桿添加監聽,並且設定兩種觸發事件change & mousemove
觸發時更新到CSS變數
範例語法備註
[ :root ]
CSS變數設定 :root { –baseColor: yellow }
CSS設定變數為值 .className { color: var(–baseColor) }
:root {
–base: #ffc600;
–spacing: 10px;
–blur: 10px;
}

img {
padding: var(–spacing);
background: var(–base);
filter: blur(var(–blur));
}

.hl {
color: var(–base);
}
[ element.dataset() ]
HTML5 data-* 在第一篇有講到
這邊講的是利用.dataset選取對象的data-*屬性,跟getAttribute很像
但是dataset還能抓到data字串,getAttribute試了一下好像無法

<div id=”test” data-no=”123″ data-name=”yy” data-time=”00:00″></div>

// 輸出 {no: “123”, name: “yy”, time: “00:00”}
document.querySelector(‘#test’).dataset

// 皆輸出123
document.querySelector(‘#test’).dataset.no

document.querySelector(‘#test ‘).getAttribute(‘data-no’);

範例code使用 const suffix = this.dataset.sizing || ”;
如果變數不一定取的到值的話可以多加一個空值

[ style.setProperty() ]
等同於 cssPropertyName
style.setProperty(‘padding’, ’15px’);
style.padding = ’15px’;

範例code中 將input的name屬性 命名為CSS屬性名稱來做呼應

document.documentElement.style.setProperty(`–${this.name

}`, this.value + suffix);

转载请注明:XAMPP中文组官网 » day03: CSS Variable

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