資訊專欄INFORMATION COLUMN
摘要：變量作者簡介是推出的一個天挑戰(zhàn)。這是一個的新特性，和目前都還不支持。命名寫法是變量名，在引用這個變量時寫法是變量名。如何用改變屬性值在中即代表文檔根元素。所以要改變?nèi)值淖兞?，可以這樣寫源碼下載掃碼申請加入全棧部落
Day03 - CSS 變量
實現(xiàn)效果作者：?liyuechun
簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰(zhàn)。項目免費提供了 30 個視頻教程、30 個挑戰(zhàn)的起始文檔和 30 個挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用。現(xiàn)在你看到的是這系列指南的第 3 篇。完整指南在 從零到壹全棧部落。
用 JavaScript 和 CSS3 實現(xiàn)拖動滑塊時，實時調(diào)整圖片的內(nèi)邊距、模糊度、背景顏色，同時標題中 JS 兩字的顏色也隨圖片背景顏色而變化。
涉及特性:root
var(--xxx)：CSS 變量（CSS Variables）
filter: blur()
事件 change、mousemove
HTML源碼CSS源碼Update CSS Variables with JS
{spacing:}{blur:}{base:}
JS源碼
過程指南 CSS 部分準備
聲明全局（:root）的 CSS 變量
將變量應用到頁面中對應元素
處理標題的 CSS 值
JS 實時更新 CSS 值獲取頁面中 input 元素
給每個 input 添加監(jiān)聽事件，使其在值變動，觸發(fā)更新操作
同 2 ，添加鼠標滑過時的事件監(jiān)聽
編寫處理更新操作的方法
獲取參數(shù)值后綴
獲取參數(shù)名（blur、spacing、color）
獲取參數(shù)值（12px、#efefef）
賦值給對應的 CSS 變量
基礎(chǔ)知識
NodeList 和 Array 的區(qū)別
可以打開 proto 查看它的方法，其中有 forEach()、item()、keys() 等。而 Array 的 prototype 中有 map()、pop() 等數(shù)組才有的方法。
HTML5 中的自定義數(shù)據(jù)屬性 dataset
HTML5 中可以為元素添加非標準的自定義屬性，只需要加上 data- 前綴，可以隨便添加和命名。添加之后，可以通過元素的 dataset 屬性來訪問這些值，dataset 的值是 DOMStringMap 的一個實例化對象，其中包含之前所設(shè)定的自定義屬性的“名-值”對。
CSS variable
這是一個 CSS3 的新特性，IE 和 Edge 目前都還不支持。命名寫法是 --變量名，在引用這個變量時寫法是 var(--變量名)。具體實例見下一條代碼。
:root 偽類
這個偽元素匹配的是文檔的根元素，也就是 標簽。
所以常用于聲明全局的 CSS 變量：
:root {
--color: #fff;
}
在使用時：
img {
background: var(--base);
}
CSS 濾鏡 filter
CSS 的濾鏡提供了一些圖形特效，比如高斯模糊、銳化、變色等。它帶有一些預設(shè)的函數(shù)，在使用時加上參數(shù)調(diào)用這些函數(shù)即可。在 Chrome、Firefox 中都支持。
解決難點
如何處理參數(shù)值（一個有 px 、另一個沒有）
運用 dataset 儲存后綴，有 px 后綴的標簽中設(shè)置 ：
JS 中通過 dataset.sizing 來獲取后綴值：
const suffix = this.dataset.sizing || "";
此時 suffix 獲取到的值，針對顏色為空，而針對長度類的則為 "px"。
如何用 JavaScript 改變 CSS 屬性值？
在 JavaScript 中 document.documentElement 即代表文檔根元素。所以要改變?nèi)值?CSS 變量，可以這樣寫：
document.documentElement.style.setProperty("--base", "#fff");
源碼下載
Github Source Code
| 掃碼申請加入全棧部落 |
|---|
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83878.html
摘要：變量作者簡介是推出的一個天挑戰(zhàn)。這是一個的新特性，和目前都還不支持。命名寫法是變量名，在引用這個變量時寫法是變量名。如何用改變屬性值在中即代表文檔根元素。 Day03 - CSS 變量 作者：?liyuechun 簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰(zhàn)。項目免費提供了 30 個視頻教程、30 個挑戰(zhàn)的起始文檔和 30 個挑戰(zhàn)解決方案源代碼。目的是...
摘要：表單元素單行文本框密碼框單選按鈕復選按鈕附件提交按鈕拓展搜索框，日期框，數(shù)字框，框的屬性參數(shù)的不能缺省參數(shù)的按鈕的時候不能缺省提示語用在單選按鈕和復選按鈕中表示默認選中用在下拉菜單中表示默認選中注意和可以為單值屬性下拉菜單山西江西甘肅甘肅中 表單元素 1. input 單行文本框 密碼框 ...
摘要：表單元素單行文本框密碼框單選按鈕復選按鈕附件提交按鈕拓展搜索框，日期框，數(shù)字框，框的屬性參數(shù)的不能缺省參數(shù)的按鈕的時候不能缺省提示語用在單選按鈕和復選按鈕中表示默認選中用在下拉菜單中表示默認選中注意和可以為單值屬性下拉菜單山西江西甘肅甘肅中 表單元素 1. input 單行文本框 密碼框 ...
閱讀 3527·2021-11-23 10:13
閱讀 895·2021-09-22 16:01
閱讀 935·2021-09-09 09:33
閱讀 670·2021-08-05 09:58
閱讀 1748·2019-08-30 11:14
閱讀 2025·2019-08-30 11:02
閱讀 3301·2019-08-29 16:28
閱讀 1515·2019-08-29 16:09
