国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Day03 - CSS 變量

dunizb / 2098人閱讀

摘要：變量作者簡介是推出的一個天挑戰。這是一個的新特性，和目前都還不支持。命名寫法是變量名，在引用這個變量時寫法是變量名。如何用改變屬性值在中即代表文檔根元素。

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

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

涉及特性

:root

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

filter: blur()

事件 change、mousemove

HTML源碼 
  
Update CSS Variables with JS


  

    
    

    
    

    
    
  



  

    
{spacing:}

    
{blur:}

    
{base:}
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

社群品牌：從零到壹全棧部落
定位：尋找共好，共同學習，持續輸出全棧技術社群
業界榮譽：IT界的邏輯思維
文化：輸出是最好的學習方式
官方公眾號：全棧部落
社群發起人：春哥(從零到壹創始人，交流微信：liyc1215)
技術交流社區：全棧部落BBS
全棧部落完整系列教程：全棧部落完整電子書學習筆記
關注全棧部落官方公眾號，每晚十點接收系列原創技術推送

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

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

相關文章

  • Day03 - CSS 變量

    摘要：變量作者簡介是推出的一個天挑戰。這是一個的新特性，和目前都還不支持。命名寫法是變量名，在引用這個變量時寫法是變量名。如何用改變屬性值在中即代表文檔根元素。所以要改變全局的變量，可以這樣寫源碼下載掃碼申請加入全棧部落 Day03 - CSS 變量 作者：?liyuechun 簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、...

    Allen 評論0 收藏0

  • html/css day03

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

    Binguner 評論0 收藏0

  • html/css day03

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

    haitiancoder 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<