Day03 - CSS 變量

Allen 發布于2019-08-20 17:48 / 2398人閱讀

摘要：變量作者簡介是推出的一個天挑戰。這是一個的新特性，和目前都還不支持。命名寫法是變量名，在引用這個變量時寫法是變量名。如何用改變屬性值在中即代表文檔根元素。所以要改變全局的變量，可以這樣寫源碼下載掃碼申請加入全棧部落

Day03 - CSS 變量

作者：?liyuechun
簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用。現在你看到的是這系列指南的第 3 篇。完整指南在從零到壹全棧部落。

實現效果

用 JavaScript 和 CSS3 實現拖動滑塊時，實時調整圖片的內邊距、模糊度、背景顏色，同時標題中 JS 兩字的顏色也隨圖片背景顏色而變化。

涉及特性

:root

var(--xxx)：CSS 變量（CSS Variables）

filter: blur()

事件 change、mousemove

HTML源碼

  Update CSS Variables with JS

  
    Spacing:
    

    Blur:
    

    Base Color
    
  


  
    {spacing:#ffc600}
    {blur:10px}
    {base:10px}

CSS源碼

JS源碼

過程指南 CSS 部分準備

聲明全局（:root）的 CSS 變量

將變量應用到頁面中對應元素

處理標題的 CSS 值

JS 實時更新 CSS 值

獲取頁面中 input 元素

給每個 input 添加監聽事件，使其在值變動，觸發更新操作

同 2 ，添加鼠標滑過時的事件監聽

編寫處理更新操作的方法

獲取參數值后綴

獲取參數名（blur、spacing、color）

獲取參數值（12px、#efefef）

賦值給對應的 CSS 變量

基礎知識

NodeList 和 Array 的區別

可以打開 proto 查看它的方法，其中有 forEach()、item()、keys() 等。而 Array 的 prototype 中有 map()、pop() 等數組才有的方法。

HTML5 中的自定義數據屬性 dataset

HTML5 中可以為元素添加非標準的自定義屬性，只需要加上 data- 前綴，可以隨便添加和命名。添加之后，可以通過元素的 dataset 屬性來訪問這些值，dataset 的值是 DOMStringMap 的一個實例化對象，其中包含之前所設定的自定義屬性的“名-值”對。

CSS variable

這是一個 CSS3 的新特性，IE 和 Edge 目前都還不支持。命名寫法是 --變量名，在引用這個變量時寫法是 var(--變量名)。具體實例見下一條代碼。

:root 偽類

這個偽元素匹配的是文檔的根元素，也就是標簽。

所以常用于聲明全局的 CSS 變量：

:root {
  --color: #fff;
}

在使用時：

img {
  background: var(--base);
}

CSS 濾鏡 filter

CSS 的濾鏡提供了一些圖形特效，比如高斯模糊、銳化、變色等。它帶有一些預設的函數，在使用時加上參數調用這些函數即可。在 Chrome、Firefox 中都支持。

解決難點

如何處理參數值（一個有 px 、另一個沒有）

運用 dataset 儲存后綴，有 px 后綴的標簽中設置：

JS 中通過 dataset.sizing 來獲取后綴值：

const suffix = this.dataset.sizing || "";

此時 suffix 獲取到的值，針對顏色為空，而針對長度類的則為 "px"。

如何用 JavaScript 改變 CSS 屬性值？

在 JavaScript 中 document.documentElement 即代表文檔根元素。所以要改變全局的 CSS 變量，可以這樣寫：

document.documentElement.style.setProperty("--base", "#fff");

源碼下載

Github Source Code

掃碼申請加入全棧部落

GPU云服務器云服務器服務器03還是08 服務器03和08 VoLLcloudh&amp03 rds035l03

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83878.html

Day03 - CSS 變量

摘要：變量作者簡介是推出的一個天挑戰。這是一個的新特性，和目前都還不支持。命名寫法是變量名，在引用這個變量時寫法是變量名。如何用改變屬性值在中即代表文檔根元素。 Day03 - CSS 變量作者：?liyuechun 簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是...

dunizb 2019-08-20 18:09 評論0 收藏0
html/css day03

摘要：表單元素單行文本框密碼框單選按鈕復選按鈕附件提交按鈕拓展搜索框，日期框，數字框，框的屬性參數的不能缺省參數的按鈕的時候不能缺省提示語用在單選按鈕和復選按鈕中表示默認選中用在下拉菜單中表示默認選中注意和可以為單值屬性下拉菜單山西江西甘肅甘肅中表單元素 1. input 單行文本框密碼框 ...

Binguner 2019-08-02 15:41 評論0 收藏0
html/css day03

摘要：表單元素單行文本框密碼框單選按鈕復選按鈕附件提交按鈕拓展搜索框，日期框，數字框，框的屬性參數的不能缺省參數的按鈕的時候不能缺省提示語用在單選按鈕和復選按鈕中表示默認選中用在下拉菜單中表示默認選中注意和可以為單值屬性下拉菜單山西江西甘肅甘肅中表單元素 1. input 單行文本框密碼框 ...

haitiancoder 2019-08-30 15:44 評論0 收藏0