css3中的var()函數(shù)詳解
我要評論css3的var()函數(shù)
變量要以兩個(gè)連字符--(橫桿)(減號)為開頭
變量可以在:root{}中定義, :root可以在css中創(chuàng)建全局樣式變量。通過 :root本身寫的樣式，相當(dāng)于 html，但優(yōu)先級比后者高。
在CSS3中，var()函數(shù)是一個(gè)用于插入CSS自定義屬性（也稱為CSS變量）的值的函數(shù)。它允許你在樣式表中定義可重用的值，并在多個(gè)地方引用它們，從而使你的CSS更加靈活和可維護(hù)。
使用var()函數(shù)的基本語法如下：
var(--variable-name, fallback-value)
--variable-name：必需的，表示自定義屬性的名稱，名稱前必須有兩個(gè)連字符（--）。fallback-value：可選的，表示當(dāng)自定義屬性未定義時(shí)使用的回退值。
例如，你可以在:root選擇器中定義一個(gè)自定義屬性，并在其他地方使用var()函數(shù)來引用它：
:root {
--main-color: #4285f4;
}
body {
background-color: var(--main-color);
}
.button {
background-color: var(--main-color);
color: white;
padding: 10px 20px;
border-radius: 5px;
}在這個(gè)例子中，:root選擇器定義了一個(gè)名為--main-color的自定義屬性，并將其值設(shè)置為#4285f4。然后，在body和.button選擇器中，使用var(--main-color)來引用該自定義屬性的值。如果以后需要更改主色調(diào)，只需更新:root選擇器中的--main-color值即可。
var()函數(shù)還可以接受一個(gè)可選的回退值，用于在自定義屬性未定義時(shí)提供備選方案。例如：
.element {
color: var(--undefined-color, black);
}在這個(gè)例子中，如果--undefined-color未定義，則.element的顏色將回退到黑色。
需要注意的是，自定義屬性的名稱是區(qū)分大小寫的，并且在引用時(shí)必須使用與定義時(shí)完全相同的名稱。此外，自定義屬性的作用域是它們被定義的選擇器及其后代選擇器。如果你想在整個(gè)文檔中使用自定義屬性，可以將其定義在:root選擇器中，因?yàn)?code>:root選擇器表示文檔樹的根元素，通常是<html>元素。
CSS3 中的 var() 函數(shù)用于插入 CSS 自定義屬性的值，這些自定義屬性通常被稱為 CSS 變量。這個(gè)函數(shù)提供了一種強(qiáng)大的方式來創(chuàng)建可重用和可維護(hù)的樣式，尤其是在大型項(xiàng)目中，當(dāng)需要在多個(gè)地方使用相同的值時(shí)。
基本語法
var(--custom-property-name, fallback-value)
--custom-property-name：必需的，表示自定義屬性的名稱，名稱前必須有兩個(gè)連字符（--）。這是為了區(qū)分自定義屬性和現(xiàn)有的 CSS 屬性。fallback-value：可選的，當(dāng)自定義屬性無效或未定義時(shí)使用的回退值。
示例
以下是一個(gè)簡單的例子，展示了如何在 CSS 中使用 var() 函數(shù)：
:root {
--primary-color: #4285f4;
--secondary-color: #0f9d58;
}
body {
background-color: var(--primary-color);
color: var(--text-color, #000); /* 如果 --text-color 未定義，則使用 #000 */
}
.button {
background-color: var(--secondary-color);
color: white;
border: none;
padding: 10px 20px;
}在這個(gè)例子中，:root 選擇器定義了兩個(gè)自定義屬性：--primary-color 和 --secondary-color。body 元素的背景色設(shè)置為 --primary-color 的值，而 .button 類的背景色設(shè)置為 --secondary-color 的值。注意，在 body 的 color 屬性中，我們嘗試使用一個(gè)未定義的自定義屬性 --text-color，并提供了一個(gè)回退值 #000。由于 --text-color 沒有在 :root 或其他地方定義，因此將使用回退值 #000。
動(dòng)態(tài)更新
CSS 變量的一個(gè)強(qiáng)大之處是它們可以動(dòng)態(tài)更新，這意味著當(dāng)變量的值改變時(shí)，所有使用該變量的樣式都會(huì)自動(dòng)更新。這使得在運(yùn)行時(shí)通過 JavaScript 動(dòng)態(tài)改變樣式成為可能：
document.documentElement.style.setProperty('--primary-color', '#ff0000');上面的 JavaScript 代碼將 --primary-color 的值更改為紅色，隨后所有使用該變量的元素都會(huì)更新其樣式以反映新的顏色。
CSS3中的var()函數(shù)用于定義和使用自定義變量。它允許你在CSS樣式中使用變量，以便在多個(gè)地方重復(fù)使用相同的值。通過使用var()函數(shù)，你可以在CSS樣式中引用和修改這些變量的值。
以下是兩種使用var()函數(shù)的例子：
- 在CSS樣式中定義和使用變量：
:root {
--nav-bg-color: #333;
--theme-color: #f00;
}
.background {
background: linear-gradient(-180deg, var(--nav-bg-color) 0%, var(--theme-color) 100%);
}- 在Vue組件中使用var()函數(shù)：
<template>
<div class="box">Hello World</div>
</template>
<style lang="scss" scoped>
.box {
color: var(--theme-bg);
}
</style>這些例子展示了如何在CSS樣式中定義和使用自定義變量，并通過var()函數(shù)引用這些變量的值。
// 錯(cuò)誤寫法
.test{
--size: 20;
font-size: var(--size)px; // 這里的寫法是錯(cuò)誤，這樣會(huì)讀取成font-size:20 px,值的中間會(huì)多了一個(gè)空格，導(dǎo)致讀取失敗
}
// 正確寫法
.test2{
--size: 20px;
--size2: 20;
font-size: var(--size);
font-size: calc(var(--size2) * 1px);
}如何在JavaScript中設(shè)置CSS變量的值？
在JavaScript中，你可以使用window.getComputedStyle()方法和getPropertyValue()方法來獲取CSS中的自定義屬性（也稱為CSS變量）的值。CSS變量通常是以--*開頭的。
以下是一個(gè)簡單的示例，展示了如何在JavaScript中獲取CSS變量的值：
// 假設(shè)你有以下的CSS定義
:root {
--main-color: #06c;
}
// 在JavaScript中獲取這個(gè)變量的值
const element = document.documentElement; // 獲取根元素，通常是<html>
const style = window.getComputedStyle(element);
const mainColor = style.getPropertyValue('--main-color');
console.log(mainColor); // 輸出 "#06c"在上面的代碼中，我們首先獲取了文檔的根元素（通常是<html>元素），然后使用window.getComputedStyle()來獲取這個(gè)元素的所有最終使用的CSS屬性值。接著，我們使用getPropertyValue()方法來獲取特定的CSS變量的值。
如果你想設(shè)置CSS變量的值，你可以直接在元素的style屬性中設(shè)置，如下：
// 獲取你想要設(shè)置變量的元素
const myElement = document.getElementById('myElement');
// 設(shè)置CSS變量的值
myElement.style.setProperty('--my-variable', 'red');
// 現(xiàn)在，CSS變量 --my-variable 在 myElement 及其子元素中可用，并且值為 'red'請注意，setProperty()方法是在元素的style對象上調(diào)用的，而不是在window.getComputedStyle()返回的對象上。此外，通過這種方式設(shè)置的CSS變量只對該元素及其子元素有效，它們不會(huì)影響到文檔的其他部分。
另外，CSS變量是大小寫敏感的，因此在JavaScript中引用它們時(shí)必須確保大小寫一致。
在JavaScript中設(shè)置和獲取CSS中的自定義屬性（也稱為CSS變量）的值，可以通過以下方式實(shí)現(xiàn)：
獲取CSS變量
要獲取CSS中定義的變量值，你可以使用element.style.getPropertyValue()方法，但這僅適用于內(nèi)聯(lián)樣式中定義的變量。對于在:root或其他選擇器中定義的全局變量，你需要使用window.getComputedStyle()方法。
// 獲取根元素
const root = document.documentElement;
// 使用getComputedStyle獲取所有計(jì)算后的樣式，包括CSS變量
const computedStyle = window.getComputedStyle(root);
// 獲取CSS變量的值
const myVariable = computedStyle.getPropertyValue('--my-css-variable');
console.log(myVariable); // 輸出CSS變量的值設(shè)置CSS變量
要設(shè)置CSS變量的值，你可以直接修改元素的style屬性或使用CSSStyleDeclaration對象的setProperty()方法。
// 獲取你想要設(shè)置變量的元素
const myElement = document.getElementById('myElement');
// 使用setProperty設(shè)置CSS變量的值
myElement.style.setProperty('--my-css-variable', 'blue');
// 或者直接設(shè)置style屬性（僅適用于內(nèi)聯(lián)樣式）
myElement.style.cssText = `--my-css-variable: blue;`;
// 注意：這樣設(shè)置的變量只會(huì)影響到該元素及其子元素如果你想要設(shè)置全局的CSS變量（即影響整個(gè)文檔的變量），你應(yīng)該修改:root元素的樣式：
// 獲取根元素
const root = document.documentElement;
// 設(shè)置全局CSS變量的值
root.style.setProperty('--global-css-variable', 'green');
// 或者直接設(shè)置style屬性
root.style.cssText = `--global-css-variable: green;`;
// 這樣設(shè)置的變量將影響整個(gè)文檔注意事項(xiàng)
- CSS變量名是大小寫敏感的，因此在JavaScript中設(shè)置或獲取變量時(shí)，必須確保大小寫與CSS中定義的一致。
- 通過element.style設(shè)置的內(nèi)聯(lián)樣式僅適用于該元素本身，不會(huì)影響到其他元素。而通過修改:root元素設(shè)置的CSS變量是全局的，會(huì)影響到整個(gè)文檔。
- 如果CSS變量在樣式表中定義，并且沒有被JavaScript直接修改過，那么element.style.getPropertyValue()可能無法獲取到這個(gè)變量的值。在這種情況下，應(yīng)該使用window.getComputedStyle()來獲取變量的值。
- setProperty()方法接受的第二個(gè)參數(shù)是一個(gè)可選的優(yōu)先級參數(shù)，用于指定樣式的來源（如user、author、animation等）。在大多數(shù)情況下，你可以忽略這個(gè)參數(shù)。
在JavaScript中，可以使用getComputedStyle方法來獲取CSS中的變量。下面是一個(gè)示例代碼：
// 獲取CSS變量的值
const element = document.querySelector('.element');
const styles = getComputedStyle(element);
const variableValue = styles.getPropertyValue('--variable-name');
// 使用獲取到的變量值
console.log(variableValue);在上面的代碼中，首先使用querySelector方法選擇要獲取變量的元素。然后，使用getComputedStyle方法獲取該元素的計(jì)算樣式。最后，使用getPropertyValue方法傳入變量名來獲取變量的值。
請注意，變量名需要以雙橫線（–）開頭。在上面的代碼中，--variable-name是一個(gè)示例變量名，你需要將其替換為你實(shí)際使用的變量名。
在JavaScript中設(shè)置CSS變量的值可以通過以下幾種方法實(shí)現(xiàn)：
使用style屬性直接設(shè)置元素的CSS變量值：
element.style.setProperty('--variable-name', 'value');其中，element是要設(shè)置CSS變量的元素，--variable-name是CSS變量的名稱，value是要設(shè)置的值。
使用document.documentElement.style.setProperty()方法設(shè)置全局的CSS變量值：
document.documentElement.style.setProperty('--variable-name', 'value');這種方法會(huì)將CSS變量的值應(yīng)用到整個(gè)文檔中。
使用CSSStyleSheet.insertRule()方法動(dòng)態(tài)插入CSS規(guī)則來設(shè)置CSS變量的值：
const styleSheet = document.styleSheets[0];
styleSheet.insertRule(':root { --variable-name: value; }', styleSheet.cssRules.length);其中，:root選擇器表示文檔的根元素，--variable-name是CSS變量的名稱，value是要設(shè)置的值。
使用CSSStyleSheet.addRule()方法動(dòng)態(tài)添加CSS規(guī)則來設(shè)置CSS變量的值：
const styleSheet = document.styleSheets[0];
styleSheet.addRule(':root', '--variable-name: value;');這種方法與上一種方法類似，只是使用了不同的語法。
請注意，以上方法中的--variable-name是CSS變量的名稱，value是要設(shè)置的值。你可以根據(jù)需要自行替換。
如何用Js設(shè)置和獲取CSS的變量
可以使用JavaScript來設(shè)置和獲取CSS變量。下面是一個(gè)示例：
設(shè)置CSS變量：
document.documentElement.style.setProperty('--footer-color', 'blue');獲取CSS變量：
var footerColor = getComputedStyle(document.documentElement).getPropertyValue('--footer-color');
console.log(footerColor);這里的--footer-color是一個(gè)CSS變量的名稱，可以根據(jù)需要自定義。通過setProperty方法可以設(shè)置CSS變量的值，而getComputedStyle方法可以獲取CSS變量的值。
在JavaScript中設(shè)置和獲取CSS變量（也稱為CSS自定義屬性）可以通過操作元素的style屬性或使用getPropertyValue和setProperty方法來完成。CSS變量通常以兩個(gè)連字符開頭（例如，--my-variable）。
設(shè)置CSS變量
要設(shè)置CSS變量，可以直接在元素的style屬性上設(shè)置它，或者使用CSSStyleDeclaration的setProperty方法。
示例1：通過style屬性設(shè)置
// 獲取元素
const element = document.querySelector('.my-element');
// 設(shè)置CSS變量
element.style.setProperty('--my-variable', '10px');示例2：通過style屬性直接設(shè)置（注意：這種方法可能不被所有瀏覽器支持）
// 獲取元素
const element = document.querySelector('.my-element');
// 設(shè)置CSS變量（注意：這種方法可能不起作用，因?yàn)镃SS變量名通常包含連字符）
// 更推薦使用 setProperty 方法
element.style['--my-variable'] = '10px'; // 可能不起作用獲取CSS變量
要獲取CSS變量的值，可以使用CSSStyleDeclaration的getPropertyValue方法。
示例：獲取CSS變量的值
// 獲取元素
const element = document.querySelector('.my-element');
// 獲取CSS變量的值
const value = element.style.getPropertyValue('--my-variable');
console.log(value); // 輸出：10px（如果之前設(shè)置了該值）注意事項(xiàng)
- 當(dāng)你在JavaScript中通過element.style設(shè)置CSS變量時(shí)，你是在元素的行內(nèi)樣式上設(shè)置它。這意味著它將覆蓋在外部或內(nèi)部樣式表中為該元素設(shè)置的相同CSS變量。
- 如果你想要獲取在外部或內(nèi)部樣式表中設(shè)置的CSS變量的值，而不是行內(nèi)樣式中設(shè)置的值，你可能需要使用getComputedStyle方法。
示例：使用getComputedStyle獲取CSS變量的值
// 獲取元素
const element = document.querySelector('.my-element');
// 獲取計(jì)算后的樣式
const computedStyle = getComputedStyle(element);
// 獲取CSS變量的值
const value = computedStyle.getPropertyValue('--my-variable');
console.log(value); // 輸出在樣式表中設(shè)置的值，或者如果沒有設(shè)置則輸出默認(rèn)值如何用Js操作style標(biāo)簽
在JavaScript中操作<style>標(biāo)簽可以通過多種方式實(shí)現(xiàn)，包括創(chuàng)建新的<style>元素、修改現(xiàn)有的<style>元素的內(nèi)容，或者使用CSSOM（CSS Object Model）來動(dòng)態(tài)地改變樣式。以下是一些基本示例：
創(chuàng)建并添加新的<style>元素
你可以創(chuàng)建一個(gè)新的<style>元素，設(shè)置其innerHTML來包含CSS規(guī)則，然后將其添加到DOM中。
// 創(chuàng)建一個(gè)新的<style>元素
const styleElement = document.createElement('style');
// 設(shè)置<style>元素的CSS內(nèi)容
styleElement.innerHTML = `
body {
background-color: lightblue;
}
`;
// 將<style>元素添加到<head>中
document.head.appendChild(styleElement);修改現(xiàn)有的<style>元素
如果你已經(jīng)有一個(gè)<style>元素并且想要修改它的內(nèi)容，你可以通過選擇該元素并更改其innerHTML來實(shí)現(xiàn)。
// 獲取現(xiàn)有的<style>元素（假設(shè)它有一個(gè)id）
const existingStyleElement = document.getElementById('my-style');
// 修改<style>元素的CSS內(nèi)容
existingStyleElement.innerHTML = `
h1 {
color: red;
}
`;使用CSSOM動(dòng)態(tài)改變樣式
除了直接操作<style>標(biāo)簽外，你還可以使用CSSOM來動(dòng)態(tài)地改變頁面上元素的樣式。這通常是通過修改元素的style屬性來實(shí)現(xiàn)的。
// 獲取元素并改變其樣式
const myElement = document.getElementById('my-element');
myElement.style.backgroundColor = 'yellow'; // 將背景色改為黃色
myElement.style.fontSize = '20px'; // 更改字體大小請注意，通過元素的style屬性設(shè)置的樣式是內(nèi)聯(lián)樣式，它們會(huì)覆蓋外部和內(nèi)部樣式表中的樣式（除非后者使用了!important規(guī)則）。
操作<style>標(biāo)簽中的特定規(guī)則
如果你想要更精細(xì)地控制<style>標(biāo)簽中的CSS規(guī)則，你可能需要使用更高級的CSSOM方法，如insertRule和deleteRule。這些方法允許你向現(xiàn)有的<style>元素添加或刪除特定的CSS規(guī)則。
// 獲取現(xiàn)有的<style>元素（或創(chuàng)建一個(gè)新的）
const styleElement = document.getElementById('my-style') || document.createElement('style');
document.head.appendChild(styleElement); // 如果是新創(chuàng)建的，則添加到<head>中
// 獲取<style>元素的sheet屬性（一個(gè)CSSStyleSheet對象）
const styleSheet = styleElement.sheet;
// 使用insertRule方法添加一個(gè)新的CSS規(guī)則
styleSheet.insertRule('p { color: green; }', 0); // 在規(guī)則列表的開頭添加新規(guī)則
// 使用deleteRule方法刪除一個(gè)CSS規(guī)則（需要知道規(guī)則的索引）
// styleSheet.deleteRule(0); // 刪除索引為0的規(guī)則（這里只是演示，實(shí)際上你可能不想立即刪除它）請注意，insertRule和deleteRule方法可能因?yàn)g覽器而異，并且在使用它們時(shí)需要確保<style>元素已經(jīng)被添加到文檔中（即其sheet屬性是可訪問的）。
讓我們逐一了解CSSStyleElement、insertRule()以及CSSStyleDeclaration。
CSSStyleElement
CSSStyleElement是表示HTML <style> 元素的接口。這個(gè)接口繼承自HTMLElement，并且添加了與樣式表相關(guān)的屬性和方法。雖然實(shí)際上在瀏覽器中并不存在名為CSSStyleElement的具體接口（截至我的最后更新日期），但<style>元素通常是通過HTMLStyleElement接口來表示的。這可能是對HTMLStyleElement的一個(gè)誤解或混淆。
HTMLStyleElement具有一些屬性和方法，如sheet，它返回一個(gè)CSSStyleSheet對象，代表該<style>元素包含的樣式表。
insertRule()
insertRule()方法是CSSStyleSheet接口的一部分，而不是CSSStyleElement或HTMLStyleElement。這個(gè)方法用于向樣式表中插入新的CSS規(guī)則。它接受兩個(gè)參數(shù)：
rule：一個(gè)字符串，表示要插入的CSS規(guī)則。index：一個(gè)整數(shù)，表示在樣式表的哪個(gè)位置插入新規(guī)則。如果省略此參數(shù)，則新規(guī)則將被添加到樣式表的末尾。
使用insertRule()的一個(gè)例子：
// 假設(shè)我們有一個(gè)<style>元素
let styleElement = document.querySelector('style');
// 獲取與該<style>元素相關(guān)聯(lián)的樣式表
let styleSheet = styleElement.sheet;
// 使用insertRule()在樣式表的開頭插入一條新規(guī)則
styleSheet.insertRule('body { background-color: lightgreen; }', 0);這將把背景顏色設(shè)置為淺綠色的規(guī)則添加到<style>元素關(guān)聯(lián)的樣式表的開頭。
CSSStyleDeclaration
CSSStyleDeclaration是一個(gè)接口，表示一個(gè)CSS聲明塊，它是一個(gè)包含一組CSS屬性和值的對象。通常，你可以通過訪問HTML元素的style屬性來獲取一個(gè)CSSStyleDeclaration對象。這個(gè)對象包含一組對應(yīng)于CSS屬性和值的方法和屬性，允許你讀取、修改和添加內(nèi)聯(lián)樣式。
例如：
// 獲取一個(gè)HTML元素
let element = document.querySelector('div');
// 獲取該元素的CSSStyleDeclaration對象
let style = element.style;
// 設(shè)置背景顏色和內(nèi)邊距
style.backgroundColor = 'red';
style.padding = '10px';在這個(gè)例子中，element.style返回一個(gè)CSSStyleDeclaration對象，我們可以使用它來修改元素的內(nèi)聯(lián)樣式。注意，這里修改的是元素的內(nèi)聯(lián)樣式，而不是在<style>標(biāo)簽或外部樣式表中定義的樣式。
總結(jié)一下，雖然你可能在查找資料時(shí)遇到了混淆或誤解，但希望以上關(guān)于HTMLStyleElement、insertRule()和CSSStyleDeclaration的解釋能夠幫助你更好地理解它們在CSS和JavaScript中的用途和工作方式。
到此這篇關(guān)于css3的var()函數(shù)的文章就介紹到這了,更多相關(guān)css3 var()函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS3通過var()和calc()函數(shù)實(shí)現(xiàn)動(dòng)畫特效
這篇文章主要介紹了CSS3通過var()和calc()函數(shù)實(shí)現(xiàn)動(dòng)畫特效,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-29詳解利用css3的var()實(shí)現(xiàn)運(yùn)行時(shí)改變scss的變量值
這篇文章主要介紹了詳解利用css3的var()實(shí)現(xiàn)運(yùn)行時(shí)改變scss的變量值，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨2021-03-02
