通過CSS變量修改樣式的方法示例
2019/4/14 21:26:26來源:不詳
題目
js怎么去修改css偽類樣式呢?但是js并沒有偽類選擇器,那么該怎么辦呢?網(wǎng)上有不少方法,比如通過切換元素的類、在style中動(dòng)態(tài)插入新的樣式等。
那么這里再來一種方法,設(shè)置css變量(var),通過js去改變這個(gè)變量來實(shí)現(xiàn)。
示例:改變div的hover背景色
<!-- css --> <style type="text/css"> :root { --divHoverColor: red; } div { width: 100px; height: 100px; background: bisque; } div:hover { background: var(--divHoverColor); } </style> <!-- html --> <div onClick="onDivClick('green')"/> <!-- js --> <script type="text/javascript"> function onDivClick(value){ document.documentElement.style.setProperty('--divHoverColor', value); } </script>
那么,來熟悉下css variable吧
1. 基本用法
局部變量
div { --masterColor: red; background: var(--masterColor); }
全局變量
/* 對(duì)于HTML來說,:root 透露表現(xiàn) <html> 元素 */ :root { --masterColor: red; } div { background: var(--masterColor); }
2. 語法
var( <custom-property-name> [, <declaration-value> ]? )
<custom-property-name> : 自定義屬性名
<declaration-value> : 聲明值(fallback value)
示例:
div { /* --masterColor未定義,所以背景色使用red 它可以通過逗號(hào)分隔,定義多個(gè)聲明值,var(--masterColor, red, green) */ background: var(--masterColor, red); }
變量可以通過var()進(jìn)行引用
示例:
div { --masterColor: red; --bgColor: var(--masterColor) }
細(xì)致:屬性名是不能使用變量的
錯(cuò)誤示例:
div { --bg: background; var(--bg): red; }
3. 欣賞器支持
使用@support檢測(cè)
@supports ( (--masterColor: red)) { /* supported */ } @supports ( not (--masterColor: red)) { /* not supported */ }
使用JS檢測(cè)
const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--masterColor', 'red'); if (isSupported) { /* supported */ } else { /* not supported */ }
參考
以上就是本文的悉數(shù)內(nèi)容,盼望對(duì)大家的學(xué)習(xí)有所幫助,也盼望大家多多支持圖趣網(wǎng)。
[教程作者:佚名]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/wd497.html
本文地址:http://m.likemindfilms.com/tutorial/wd497.html
這些是最新的
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏
最熱門的教程