- 所在位置：
- 首頁 >
- 編程技術(shù) >
- CSS/HTML >
- 用CSS變量修改樣式怎樣做，代碼是什么
用CSS變量修改樣式怎樣做，代碼是什么
Admin 2022-05-28 群英技術(shù)資訊 877 次瀏覽
這篇文章主要介紹了用CSS變量修改樣式怎樣做，代碼是什么相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇用CSS變量修改樣式怎樣做，代碼是什么文章都會有所收獲，下面我們一起來看看吧。問題
js怎么去修改css偽類樣式呢？但是js并沒有偽類選擇器，那么該怎么辦呢？網(wǎng)上有不少方法，比如通過切換元素的類、在style中動態(tài)插入新的樣式等。
那么這里再來一種方法，設(shè)置css變量（var），通過js去改變這個變量來實(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>
那么，來認(rèn)識下css variable吧
1. 基本用法
局部變量
div {
--masterColor: red;
background: var(--masterColor);
}
全局變量
/* 對于HTML來說，:root 表示 <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
它可以通過逗號分隔，定義多個聲明值，var(--masterColor, red, green)
*/
background: var(--masterColor, red);
}
變量可以通過var()進(jìn)行引用
示例：
div {
--masterColor: red;
--bgColor: var(--masterColor)
}
注意：屬性名是不能使用變量的
錯誤示例：
div {
--bg: background;
var(--bg): red;
}
3. 瀏覽器支持
Can I use
使用@support檢測
@supports ( (--masterColor: red)) {
/* supported */
}
@supports ( not (--masterColor: red)) {
/* not supported */
}
使用JS檢測
const isSupported = window.CSS && window.CSS.supports
&& window.CSS.supports('--masterColor', 'red');
if (isSupported) {
/* supported */
} else {
/* not supported */
}
參考
MDN
CSS Variable 規(guī)范
以上就是關(guān)于“用CSS變量修改樣式怎樣做，代碼是什么”的相關(guān)知識，感謝各位的閱讀，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注群英網(wǎng)絡(luò)，小編每天都會為大家更新不同的知識。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：[email protected]進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，查實(shí)之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。
猜你喜歡
-
CSS中有什么方法實(shí)現(xiàn)清除圖片空隙
這篇文章主要介紹了CSS清除圖片下幾像素空白間隙的方法 ,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
-
CSS中什么方法實(shí)現(xiàn)動態(tài)區(qū)域裁剪的效果
本篇文章帶大家了解一下CSS3 clip-path（裁剪路徑），介紹一下如何利用 clip-path 實(shí)現(xiàn)動態(tài)區(qū)域裁剪，希望對大家有所幫助！
-
CSS常用選擇器包括哪一些，要點(diǎn)是什么
導(dǎo)入外部css樣式表的方法使用link標(biāo)簽導(dǎo)入外部css樣式表<linkrel="stylesheet"href="css/demo01.css">在樣式表中import(導(dǎo)入)外部樣式表@importurl("/crazy-html5/06css/css/demo01.css");使用內(nèi)部樣式表內(nèi)部樣式表只能作用于某一個網(wǎng)頁，定義方式為在head頭部添加style標(biāo)簽，在style標(biāo)簽中即可添加頁面樣式。<head><style ...
-
CSS樣式?jīng)_突的情況怎樣處理，有哪些解決方案
1. 細(xì)化選擇符通過使用組合器（Combinator）將選擇器的描述寫得更加精確，例如對于下述代碼片段，如果想給.cellphones中的.apple增加樣式，只使用.apple，勢必會對.fruit中的.apple也造
-
用Canvas怎樣畫有填充和無填充的矩形
canvas元素使用JavaScript在網(wǎng)頁上繪制圖像。畫布是一個矩形區(qū)域，您可以控制其每一像素。canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。所以，如何用canvas繪制一個矩形呢？接下來這篇文章將給大家來介紹關(guān)于canvas畫一個矩形的實(shí)現(xiàn)方法的內(nèi)容，若是有需要的話可以看看。
推薦內(nèi)容
- CSS中flex布局如何實(shí)現(xiàn)自動換行？
- 在HTML中如何讓button居中，有幾種方法
- JS中怎樣刪除數(shù)組末尾元素？教你兩種方法
- vue怎樣獲取url參數(shù)?教你兩種方法
- 如何用Python計(jì)算BMI指數(shù)？一文帶你看懂
- python怎樣獲取數(shù)組元素的下標(biāo)？教你三種方法
- python中的ord函數(shù)有什么用？用法是什么？
- Python中array與list轉(zhuǎn)換如何做，方法是什么
- 在CSS中怎么實(shí)現(xiàn)一條橫線，方法是什么
- Python怎樣設(shè)計(jì)串口之間通信的程序
- phpstorm怎么使用和操作？一文帶你快速了解
- vue怎么給對象數(shù)組賦值？this.$set方法幫你解決
成為群英會員,開啟智能安全云計(jì)算之旅
立即注冊友鏈合作 群英網(wǎng)絡(luò) 智帝云 主機(jī)評測 idc公司 商城系統(tǒng) 跨境電商 主機(jī)吧 酷庫博客 OA系統(tǒng) 騰訊企業(yè)郵箱 銳成信息 sdwan
關(guān)注或聯(lián)系群英網(wǎng)絡(luò)
7x24小時售前：400-678-4567
7x24小時售后：0668-2555666
24小時QQ客服
群英微信公眾號
CNNIC域名投訴舉報(bào)處理平臺
服務(wù)電話：010-58813000
服務(wù)郵箱：[email protected]
投訴與建議：0668-2555555
Copyright ? QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版權(quán)所有
增值電信經(jīng)營許可證 : B1.B2-20140078 ICP核準(zhǔn)（ICP備案）粵ICP備09006778號 域名注冊商資質(zhì) 粵 D3.1-20240008
