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

資訊專欄INFORMATION COLUMN

Day03 - CSS 變量

dunizb / 2103人閱讀

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

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

用 JavaScript 和 CSS3 實(shí)現(xiàn)拖動(dòng)滑塊時(shí)，實(shí)時(shí)調(diào)整圖片的內(nèi)邊距、模糊度、背景顏色，同時(shí)標(biāo)題中 JS 兩字的顏色也隨圖片背景顏色而變化。

涉及特性

:root

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

filter: blur()

事件 change、mousemove

HTML源碼 
  
Update CSS Variables with JS


  

    
    

    
    

    
    
  



  

    
{spacing:}

    
{blur:}

    
{base:}
CSS源碼
JS源碼
過(guò)程指南 CSS 部分準(zhǔn)備

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

將變量應(yīng)用到頁(yè)面中對(duì)應(yīng)元素

處理標(biāo)題的 CSS 值

JS 實(shí)時(shí)更新 CSS 值

獲取頁(yè)面中 input 元素

給每個(gè) input 添加監(jiān)聽(tīng)事件，使其在值變動(dòng)，觸發(fā)更新操作

同 2 ，添加鼠標(biāo)滑過(guò)時(shí)的事件監(jiān)聽(tīng)

編寫處理更新操作的方法

獲取參數(shù)值后綴

獲取參數(shù)名（blur、spacing、color）

獲取參數(shù)值（12px、#efefef）

賦值給對(duì)應(yīng)的 CSS 變量

基礎(chǔ)知識(shí)

NodeList 和 Array 的區(qū)別

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

HTML5 中的自定義數(shù)據(jù)屬性 dataset

HTML5 中可以為元素添加非標(biāo)準(zhǔn)的自定義屬性，只需要加上 data- 前綴，可以隨便添加和命名。添加之后，可以通過(guò)元素的 dataset 屬性來(lái)訪問(wèn)這些值，dataset 的值是 DOMStringMap 的一個(gè)實(shí)例化對(duì)象，其中包含之前所設(shè)定的自定義屬性的“名-值”對(duì)。

CSS variable

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

:root 偽類

這個(gè)偽元素匹配的是文檔的根元素，也就是 標(biāo)簽。

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

:root {
  --color: #fff;
}

在使用時(shí)：

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

CSS 濾鏡 filter

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

解決難點(diǎn)

如何處理參數(shù)值（一個(gè)有 px 、另一個(gè)沒(méi)有）

運(yùn)用 dataset 儲(chǔ)存后綴，有 px 后綴的標(biāo)簽中設(shè)置 ：

JS 中通過(guò) dataset.sizing 來(lái)獲取后綴值：

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

此時(shí) suffix 獲取到的值，針對(duì)顏色為空，而針對(duì)長(zhǎng)度類的則為 "px"。

如何用 JavaScript 改變 CSS 屬性值？

在 JavaScript 中 document.documentElement 即代表文檔根元素。所以要改變?nèi)值?CSS 變量，可以這樣寫：

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

源碼下載

Github Source Code

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/84125.html

相關(guān)文章

  • Day03 - CSS 變量

    摘要：變量作者簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。這是一個(gè)的新特性，和目前都還不支持。命名寫法是變量名，在引用這個(gè)變量時(shí)寫法是變量名。如何用改變屬性值在中即代表文檔根元素。所以要改變?nèi)值淖兞浚梢赃@樣寫源碼下載掃碼申請(qǐng)加入全棧部落 Day03 - CSS 變量 作者：?liyuechun 簡(jiǎn)介：JavaScript30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個(gè)視頻教程、...

    Allen 評(píng)論0 收藏0

  • html/css day03

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

    Binguner 評(píng)論0 收藏0

  • html/css day03

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

    haitiancoder 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<