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

CSS Variables

XAMPP下载 admin 667浏览 0评论
 邏輯流程
給定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||”

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

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