CSS 自定義屬性 -- 使用 JS 和不使用 JS

megatron 發布于2019-08-29 13:05 / 1383人閱讀

摘要：你曾想過在頁面加載過后去修改或的變量值么我曾經嘗試過但并沒有成功因為當預處理的代碼編譯成了它的變量就不再是變量了然而自定義屬性就沒有這樣的限制在該系列的文章中我曾提及過自定義屬性它最牛扳的特性就是它的動態性它的強大我們一眼就能對比出來預處理

你曾想過在頁面加載過后去修改 Sass 或 Less 的變量值么? 我曾經嘗試過, 但并沒有成功, 因為當預處理的代碼編譯成了 CSS, 它的變量就不再是變量了, 然而, 自定義屬性就沒有這樣的限制.

在該系列的文章中, 我曾提及過自定義屬性它最牛扳的特性就是它的動態性. 它的強大我們一眼就能對比出來, 預處理變量在編譯后就成了固定值, 而自定義屬性可以在頁面加載后繼續更改變量的值.

本篇文章我們將一起來看如何通過用戶交互和 JavaScipt 來做一些帥氣的改變.

不用 JS 來更改 CSS 自定義屬性

大多數的動態特效貌似多多少少都需要點 JavaScipt, 所以, 我們就從一個簡單的例子入手, 使用自定義屬性改變 :hover 的效果

我們給一個 div 一個 width 和 height, 然后, 定義一個值為 #ccc 的自定義屬性 background. 接著, 我們用 var 函數 設置 background-color, 并給它 1s 的 transition

div {
 width: 15em;
 height: 15em;

  --background: #ccc;
  background-color: var(--background);
  transition: background-color 1s;
}

為了改變 background color, 我們再次定義 --background 的值

div:hover {
  --background: #cce;
}

雖然, 上面的例子不用自定義屬性也可以輕松的實現, 但如果我們的改變增多, 使用自定義屬性書寫的代碼明顯要更干凈, 更可讀

使用 JS 來更改 CSS 自定義屬性

用 JavaScipt 來更改自定義屬性的值將會變的特別有趣.

首先, 我們必須要知道如何獲取自定義屬性的值, 和如何設置

獲取自定義屬性的值

要獲取自定義屬性的值, 你要知道兩個 JavaScipt 函數: window.getComputedStyle 和 getPropertyValue, 前者可以獲取元素所有 CSS 屬性的值, 后者可以獲取特定屬性的值.

let style = window.getComputedStyle(element, [pseudoElt]);
var value = style.getPropertyValue(property);

如果你是 JavaScipt 方向, 那么上面的代碼你肯定不陌生. 如果你并不熟悉, 可以參考下面的示例

首先, 我們使用 :root 定義一個全局變量

:root {
 --color: red
}

接著, 我們使用 getComputedStyle() 和 getPropertyValue() 方法來讀取 color 的值.

var styles = getComputedStyle(document.documentElement);  // 獲取 root 的樣式
var colorValue = styles.getPropertyValue("--color");      // 獲取 --color 的值

現在 colorValue 的值就為 --color 的值, 不信你可以在控制臺中打印

console.log(colorValue);  // red

如何設置自定義屬性的值

要設置自定義屬性的值, 你要用到 style.setProperty 這個方法

style.setProperty(propertyName, value, priority);

setProperty 有三個參數, 前兩個是屬性名稱和屬性的值, 其中, 屬性值可以為空, 第三個 priority 是可選的, 允許你設置 important, CSS 準則建議, 盡量不設置該屬性

設置一個新值比讀取一個值更簡單, 因為你不需要將值保存到變量中.

document.documentElement.style.setProperty("--color", "green");

事實上, 在設置新值前, 該屬性可以不存在. 你可以在 setProperty中初始化自定義屬性.

移除自定義屬性

還有一個 removeProperty() 方法可以移除自定義屬性, 如果你不想要了的話

var oldValue = style.removeProperty(property);

使用 Color Picker 更改顏色值

接下來, 我們就一起來實踐一下. 為了便于大家理解, 我們不做忒復雜.

首先, 我們創建一個空的 div, 用于顯示用戶輸入的顏色

接下來, 我們在全局創建一個 --background 自定義屬性, 初始化為 #ccc, 給 div 一個 width, height 和 margin, 用 var() 函數給 background 賦值, 然后簡單設置 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 元素, 給該元素添加一個事件監聽器, 監聽用戶輸入的變化, 然后用 setProperty 將輸入的值賦給自定義屬性 --background.

var colorInput = document.querySelector("#div-bkgd");

colorInput.addEventListener("change", function() {
 document.documentElement.style.setProperty("--background", this.value);
});

大功告成, 你可以在復制代碼在瀏覽器中運行查看效果. 另外值得注意的是, color input 并不支持所有瀏覽器, 像在 IE 和 Safari 中就無法工作.

額外的示例

為了便于大家理解, 上面的例子都比較簡單, 下面提供了一些比較復雜的應用, 幫助大家快速掌握.

CSS 變量 demo

Using CSS custom properties for theme previews

總結

將自定義屬性和 JavaScipt 或其他腳本語言結合, 你會瞬間墜入自定義屬性的愛河

原文鏈接: CSS Custom Properties—Dynamic Changes With And Without Javascript (Steven Bradley)

云服務器 GPU云服務器使用自定義字體自定義鏡像使用自定義鏡像的使用使用自定義鏡像創建實例

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

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

詳解vue組件三大核心概念

摘要：前言本文主要介紹屬性事件和插槽這三個基礎概念使用方法及其容易被忽略的一些重要細節。至于如何改變，我們接下去詳細介紹單向數據流這個概念出現在組件通信。比如上例中在子組件中修改父組件傳遞過來的數組從而改變父組件的狀態。的一個核心思想是數據驅動。前言本文主要介紹屬性、事件和插槽這三個vue基礎概念、使用方法及其容易被忽略的一些重要細節。如果你閱讀別人寫的組件，也可以從這三個部分展開，它們...

rickchen 2019-08-23 17:51 評論0 收藏0
可能是最全的前端動效庫匯總

摘要：非常的龐大，而且它是完全為設計而生的動效庫。它運行于純粹的之上，是目前最強健的動畫資源庫之一?？赡苁莿摻L動特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性?？梢酝ㄟ^安裝吊炸天了，接近現實生活中的物理運動碰撞慣性動畫庫。收集日期為2019-02-28，★代表當時的該項目在github的star數量 Animate.css 56401 ★ 一個跨瀏覽器的動效基礎庫，是許多基礎動...

afishhhhh 2019-05-23 16:24 評論0 收藏0
jQuery筆記總結篇

摘要：希望在做所有事情之前，操作文檔。不受層級限制子選擇器在給定的父元素下匹配所有子元素。相鄰選擇器匹配所有緊接在元素后的元素。判斷當前對象中的某個元素是否包含指定類名，包含返回，不包含返回下標過濾器精確選出指定下標元素獲取第個元素。原文鏈接 http://blog.poetries.top/2016... 首先，來了解一下jQuery學習的整體思路 showImg(https://seg...

NoraXie 2019-08-22 10:39 評論0 收藏0
原生js練習題---第四課

摘要：然而問題是，這個法則在導航條的主體是可行的但是子選單因為前面提到的三層嵌套構造圓角，已經無法減少嵌套了，同時還得考慮到子選單也是嵌套在導航條里的啊。。。同理，反過來進入子選單時自然就用來抵消達到篩選的目的。 0x1setTimeout應用實現效果：4-01setTimeout應用又見導航條，先看下css，這里用的是雪碧圖背景做出圓角的效果，雖然是經典的方法、兼容性好，但這種代碼寫起...

Snailclimb 2019-08-19 18:06 評論0 收藏0
ECMA_作用域深入&This關鍵字

摘要：預解析聲明告知瀏覽器在全局作用域中有一個變量名為的變量。執行代碼的就是棧內存，作用域也是棧內存。關鍵字在中主要研究都是函數中的中的代表的是當前行為執行的主體方法，函數，事件中的上下文代表的是當前行為執行的環境區域例如小明在沙縣小吃吃蛋炒飯。基本認識數據類型基本數據類型 string, number, null, boolean, undefined 引用數據類型 object: ...

Harriet666 2019-08-21 15:49 評論0 收藏0