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

第三堂 – CSS Variables

XAMPP下载 admin 550浏览 0评论
 今天要做的是CSS變數與JS的互動介面,設計三個控制項,調整圖片的外框大小、模糊以及顏色,範例如下:
CSS Variables實作範例

邏輯流程
給定CSS變數
讓img使用CSS變數
監聽三個控制項的值
改變CSS變數的值
課程重點
CSS變數宣告:–variable:value,變數宣告必須以兩個減號開頭。
CSS變數使用:var(–variable),使用變數需以var()來包住變數。
利用data-attribute(第一堂提過的屬性)來設定CSS變數的單位。
利用document.documentElement.style.setProperty()來更新CSS變數。
延伸閱讀
NodeList和Array差別:實作中querySelectorAll()所取得的element會被包成一個看起來像Array的陣列,但他事實上是NodeList而不是Array。NodeList是可以轉換成Array的,而他們的差異是在於能夠使用的函式不一樣,NodeList只有少數幾個,Array有一大串的函數可以用。

label的for屬性:使label跟其他element綁在一起,如下方參考來源網站的範例,label和radio button綁在一起,這時候點選label文字也能夠觸發click。

Chrome console裡變數的__proto__屬性,記錄該變數型態所能使用的函式。

實作中用到this.dataset,dataset就是將該element所有的data-attribute組成的一個物件。

實作中在宣告suffix時用到了||,因為base這個element沒有data-sizing這個屬性,若不加入||”,會是undefined

const suffix = this.dataset.sizing||”
參考來源
SASS, LESS 退散,原生 CSS 可以使用變數啦!
label的for屬性

转载请注明:XAMPP中文组官网 » 第三堂 – CSS Variables

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