你曾想過(guò)在頁(yè)面
加載過(guò)后去修改 Sass或Less的變量值么? 我曾經(jīng)嘗試過(guò), 但并沒(méi)有成功, 因?yàn)?code>當(dāng)預(yù)處理的代碼編譯成了 CSS, 它的變量就不再是變量了, 然而,自定義屬性就沒(méi)有這樣的限制.在該系列的文章中, 我曾提及過(guò)
自定義屬性它最牛扳的特性就是它的動(dòng)態(tài)性. 它的強(qiáng)大我們一眼就能對(duì)比出來(lái),預(yù)處理變量在編譯后就成了固定值, 而自定義屬性可以在頁(yè)面加載后繼續(xù)更改變量的值.本篇文章我們將一起來(lái)看
如何通過(guò)用戶交互和 JavaScipt 來(lái)做一些帥氣的改變.
不用 JS 來(lái)更改 CSS 自定義屬性
大多數(shù)的動(dòng)態(tài)特效貌似多多少少都需要點(diǎn) JavaScipt, 所以, 我們就從一個(gè)簡(jiǎn)單的例子入手, 使用自定義屬性改變 :hover 的效果
我們給一個(gè) div 一個(gè) width 和 height, 然后, 定義一個(gè)值為 #ccc 的自定義屬性 background. 接著, 我們用 var 函數(shù) 設(shè)置 background-color, 并給它 1s 的 transition.
div {
width: 15em;
height: 15em;
--background: #ccc;
background-color: var(--background);
transition: background-color 1s;
}
為了改變 background color, 我們?cè)俅味x --background 的值
div:hover {
--background: #cce;
}
雖然, 上面的例子不用自定義屬性也可以輕松的實(shí)現(xiàn), 但如果我們的改變?cè)龆? 使用自定義屬性書寫的代碼明顯要更干凈, 更可讀
使用 JS 來(lái)更改 CSS 自定義屬性
用 JavaScipt 來(lái)更改自定義屬性的值將會(huì)變的特別有趣.
首先, 我們必須要知道如何獲取自定義屬性的值, 和如何設(shè)置
獲取自定義屬性的值
要獲取自定義屬性的值, 你要知道兩個(gè) JavaScipt 函數(shù): window.getComputedStyle 和 getPropertyValue, 前者可以獲取元素所有 CSS 屬性的值, 后者可以獲取特定屬性的值.
let style = window.getComputedStyle(element, [pseudoElt]);
var value = style.getPropertyValue(property);
如果你是 JavaScipt 方向, 那么上面的代碼你肯定不陌生. 如果你并不熟悉, 可以參考下面的示例
首先, 我們使用 :root 定義一個(gè)全局變量
:root {
--color: red
}
接著, 我們使用 getComputedStyle() 和 getPropertyValue() 方法來(lái)讀取 color 的值.
var styles = getComputedStyle(document.documentElement); // 獲取 root 的樣式
var colorValue = styles.getPropertyValue('--color'); // 獲取 --color 的值
現(xiàn)在 colorValue 的值就為 --color 的值, 不信你可以在控制臺(tái)中打印
console.log(colorValue); // red
如何設(shè)置自定義屬性的值
要設(shè)置自定義屬性的值, 你要用到 style.setProperty 這個(gè)方法
style.setProperty(propertyName, value, priority);
setProperty 有三個(gè)參數(shù), 前兩個(gè)是屬性名稱和屬性的值, 其中, 屬性值可以為空, 第三個(gè) priority 是可選的, 允許你設(shè)置 important, CSS 準(zhǔn)則建議, 盡量不設(shè)置該屬性
設(shè)置一個(gè)新值比讀取一個(gè)值更簡(jiǎn)單, 因?yàn)槟悴恍枰獙⒅当４娴阶兞恐?
document.documentElement.style.setProperty('--color', 'green');
事實(shí)上, 在設(shè)置新值前, 該屬性可以不存在. 你可以在 setProperty中初始化自定義屬性.
移除自定義屬性
還有一個(gè) removeProperty() 方法可以移除自定義屬性, 如果你不想要了的話
var oldValue = style.removeProperty(property);
使用 Color Picker 更改顏色值
接下來(lái), 我們就一起來(lái)實(shí)踐一下. 為了便于大家理解, 我們不做忒復(fù)雜.
首先, 我們創(chuàng)建一個(gè)空的 div, 用于顯示用戶輸入的顏色
<div></div>
<input type="color" id="div-bkgd" value="#cccccc">
接下來(lái), 我們?cè)谌謩?chuàng)建一個(gè) --background 自定義屬性, 初始化為 #ccc, 給 div 一個(gè) width, height 和 margin, 用 var() 函數(shù)給 background 賦值, 然后簡(jiǎn)單設(shè)置 input 的樣式.
:root {
--background: #ccc;
}
div {
width: 20em;
height: 20em;
margin: 1em auto;
background: var(--background);
}
input {
display: block;
width: 10em;
margin: 1em auto;
}
最后, 我們使用 document.querySelector() 獲取 input 元素, 給該元素添加一個(gè)事件監(jiān)聽器, 監(jiān)聽用戶輸入的變化, 然后用 setProperty 將輸入的值賦給自定義屬性 --background.
var colorInput = document.querySelector("#div-bkgd");
colorInput.addEventListener("change", function() {
document.documentElement.style.setProperty("--background", this.value);
});
大功告成, 你可以在復(fù)制代碼在瀏覽器中運(yùn)行查看效果. 另外值得注意的是, color input 并不支持所有瀏覽器, 像在 IE 和 Safari 中就無(wú)法工作.
額外的示例
為了便于大家理解, 上面的例子都比較簡(jiǎn)單, 下面提供了一些比較復(fù)雜的應(yīng)用, 幫助大家快速掌握.
總結(jié)
將自定義屬性和 JavaScipt 或其他腳本語(yǔ)言結(jié)合, 你會(huì)瞬間墜入自定義屬性的愛河
原文鏈接: CSS Custom Properties—Dynamic Changes With And Without Javascript
