柚子快報(bào)激活碼778899分享：前端 css3的var()函數(shù)
柚子快報(bào)激活碼778899分享：前端 css3的var()函數(shù)
css3的var()函數(shù)
變量要以兩個(gè)連字符--(橫桿)(減號(hào))為開頭
變量可以在:root{}中定義, :root可以在css中創(chuàng)建全局樣式變量。通過 :root本身寫的樣式，相當(dāng)于 html，但優(yōu)先級(jí)比后者高。
在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)?root選擇器表示文檔樹的根元素，通常是元素。
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ù)：
這些例子展示了如何在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; // 獲取根元素，通常是
const style = window.getComputedStyle(element);
const mainColor = style.getPropertyValue('--main-color');
console.log(mainColor); // 輸出 "#06c"
在上面的代碼中，我們首先獲取了文檔的根元素（通常是元素），然后使用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'
請(qǐng)注意，setProperty()方法是在元素的style對(duì)象上調(diào)用的，而不是在window.getComputedStyle()返回的對(duì)象上。此外，通過這種方式設(shè)置的CSS變量只對(duì)該元素及其子元素有效，它們不會(huì)影響到文檔的其他部分。
另外，CSS變量是大小寫敏感的，因此在JavaScript中引用它們時(shí)必須確保大小寫一致。
在JavaScript中設(shè)置和獲取CSS中的自定義屬性（也稱為CSS變量）的值，可以通過以下方式實(shí)現(xiàn)：
獲取CSS變量
要獲取CSS中定義的變量值，你可以使用element.style.getPropertyValue()方法，但這僅適用于內(nèi)聯(lián)樣式中定義的變量。對(duì)于在: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對(duì)象的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)先級(jí)參數(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方法傳入變量名來獲取變量的值。
請(qǐng)注意，變量名需要以雙橫線（–）開頭。在上面的代碼中，--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;');
這種方法與上一種方法類似，只是使用了不同的語法。
請(qǐng)注意，以上方法中的--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中操作