css3的var()函數

變量要以兩個連字符--(橫桿)(減號)為開頭

在這里插入圖片描述
變量可以在:root{}中定義, :root可以在css中創建全局樣式變量。通過 :root本身寫的樣式，相當于 html，但優先級比后者高。

在CSS3中，var()函數是一個用于插入CSS自定義屬性（也稱為CSS變量）的值的函數。它允許你在樣式表中定義可重用的值，并在多個地方引用它們，從而使你的CSS更加靈活和可維護。

使用var()函數的基本語法如下：

var(--variable-name, fallback-value)

--variable-name：必需的，表示自定義屬性的名稱，名稱前必須有兩個連字符（--）。
fallback-value：可選的，表示當自定義屬性未定義時使用的回退值。

例如，你可以在:root選擇器中定義一個自定義屬性，并在其他地方使用var()函數來引用它：

:root {--main-color: #4285f4;
}body {background-color: var(--main-color);
}.button {background-color: var(--main-color);color: white;padding: 10px 20px;border-radius: 5px;
}

在這個例子中，:root選擇器定義了一個名為--main-color的自定義屬性，并將其值設置為#4285f4。然后，在body和.button選擇器中，使用var(--main-color)來引用該自定義屬性的值。如果以后需要更改主色調，只需更新:root選擇器中的--main-color值即可。

var()函數還可以接受一個可選的回退值，用于在自定義屬性未定義時提供備選方案。例如：

.element {color: var(--undefined-color, black);
}

在這個例子中，如果--undefined-color未定義，則.element的顏色將回退到黑色。

需要注意的是，自定義屬性的名稱是區分大小寫的，并且在引用時必須使用與定義時完全相同的名稱。此外，自定義屬性的作用域是它們被定義的選擇器及其后代選擇器。如果你想在整個文檔中使用自定義屬性，可以將其定義在:root選擇器中，因為:root選擇器表示文檔樹的根元素，通常是<html>元素。

CSS3 中的 var() 函數用于插入 CSS 自定義屬性的值，這些自定義屬性通常被稱為 CSS 變量。這個函數提供了一種強大的方式來創建可重用和可維護的樣式，尤其是在大型項目中，當需要在多個地方使用相同的值時。

基本語法

var(--custom-property-name, fallback-value)

--custom-property-name：必需的，表示自定義屬性的名稱，名稱前必須有兩個連字符（--）。這是為了區分自定義屬性和現有的 CSS 屬性。
fallback-value：可選的，當自定義屬性無效或未定義時使用的回退值。

示例

以下是一個簡單的例子，展示了如何在 CSS 中使用 var() 函數：

: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;
}

在這個例子中，:root 選擇器定義了兩個自定義屬性：--primary-color 和 --secondary-color。body 元素的背景色設置為 --primary-color 的值，而 .button 類的背景色設置為 --secondary-color 的值。注意，在 body 的 color 屬性中，我們嘗試使用一個未定義的自定義屬性 --text-color，并提供了一個回退值 #000。由于 --text-color 沒有在 :root 或其他地方定義，因此將使用回退值 #000。

動態更新

CSS 變量的一個強大之處是它們可以動態更新，這意味著當變量的值改變時，所有使用該變量的樣式都會自動更新。這使得在運行時通過 JavaScript 動態改變樣式成為可能：

document.documentElement.style.setProperty('--primary-color', '#ff0000');

上面的 JavaScript 代碼將 --primary-color 的值更改為紅色，隨后所有使用該變量的元素都會更新其樣式以反映新的顏色。

CSS3中的var()函數用于定義和使用自定義變量。它允許你在CSS樣式中使用變量，以便在多個地方重復使用相同的值。通過使用var()函數，你可以在CSS樣式中引用和修改這些變量的值。

以下是兩種使用var()函數的例子：

在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()函數：

<template><div class="box">Hello World</div>
</template><style lang="scss" scoped>
.box {color: var(--theme-bg);
}
</style>

這些例子展示了如何在CSS樣式中定義和使用自定義變量，并通過var()函數引用這些變量的值。

// 錯誤寫法
.test{--size: 20;font-size: var(--size)px;      // 這里的寫法是錯誤，這樣會讀取成font-size:20 px,值的中間會多了一個空格，導致讀取失敗
}// 正確寫法
.test2{--size: 20px;--size2: 20;font-size: var(--size);font-size: calc(var(--size2) * 1px);
}

如何在JavaScript中設置CSS變量的值？

在JavaScript中，你可以使用window.getComputedStyle()方法和getPropertyValue()方法來獲取CSS中的自定義屬性（也稱為CSS變量）的值。CSS變量通常是以--*開頭的。

以下是一個簡單的示例，展示了如何在JavaScript中獲取CSS變量的值：

// 假設你有以下的CSS定義
:root {--main-color: #06c;
}// 在JavaScript中獲取這個變量的值
const element = document.documentElement; // 獲取根元素，通常是<html>
const style = window.getComputedStyle(element);
const mainColor = style.getPropertyValue('--main-color');console.log(mainColor); // 輸出 "#06c"

在上面的代碼中，我們首先獲取了文檔的根元素（通常是<html>元素），然后使用window.getComputedStyle()來獲取這個元素的所有最終使用的CSS屬性值。接著，我們使用getPropertyValue()方法來獲取特定的CSS變量的值。

如果你想設置CSS變量的值，你可以直接在元素的style屬性中設置，如下：

// 獲取你想要設置變量的元素
const myElement = document.getElementById('myElement');// 設置CSS變量的值
myElement.style.setProperty('--my-variable', 'red');// 現在，CSS變量 --my-variable 在 myElement 及其子元素中可用，并且值為 'red'

請注意，setProperty()方法是在元素的style對象上調用的，而不是在window.getComputedStyle()返回的對象上。此外，通過這種方式設置的CSS變量只對該元素及其子元素有效，它們不會影響到文檔的其他部分。

另外，CSS變量是大小寫敏感的，因此在JavaScript中引用它們時必須確保大小寫一致。

在JavaScript中設置和獲取CSS中的自定義屬性（也稱為CSS變量）的值，可以通過以下方式實現：

獲取CSS變量

要獲取CSS中定義的變量值，你可以使用element.style.getPropertyValue()方法，但這僅適用于內聯樣式中定義的變量。對于在:root或其他選擇器中定義的全局變量，你需要使用window.getComputedStyle()方法。

// 獲取根元素
const root = document.documentElement;// 使用getComputedStyle獲取所有計算后的樣式，包括CSS變量
const computedStyle = window.getComputedStyle(root);// 獲取CSS變量的值
const myVariable = computedStyle.getPropertyValue('--my-css-variable');console.log(myVariable); // 輸出CSS變量的值

設置CSS變量

要設置CSS變量的值，你可以直接修改元素的style屬性或使用CSSStyleDeclaration對象的setProperty()方法。

// 獲取你想要設置變量的元素
const myElement = document.getElementById('myElement');// 使用setProperty設置CSS變量的值
myElement.style.setProperty('--my-css-variable', 'blue');// 或者直接設置style屬性（僅適用于內聯樣式）
myElement.style.cssText = `--my-css-variable: blue;`;// 注意：這樣設置的變量只會影響到該元素及其子元素

如果你想要設置全局的CSS變量（即影響整個文檔的變量），你應該修改:root元素的樣式：

// 獲取根元素
const root = document.documentElement;// 設置全局CSS變量的值
root.style.setProperty('--global-css-variable', 'green');// 或者直接設置style屬性
root.style.cssText = `--global-css-variable: green;`;// 這樣設置的變量將影響整個文檔

注意事項

CSS變量名是大小寫敏感的，因此在JavaScript中設置或獲取變量時，必須確保大小寫與CSS中定義的一致。
通過element.style設置的內聯樣式僅適用于該元素本身，不會影響到其他元素。而通過修改:root元素設置的CSS變量是全局的，會影響到整個文檔。
如果CSS變量在樣式表中定義，并且沒有被JavaScript直接修改過，那么element.style.getPropertyValue()可能無法獲取到這個變量的值。在這種情況下，應該使用window.getComputedStyle()來獲取變量的值。
setProperty()方法接受的第二個參數是一個可選的優先級參數，用于指定樣式的來源（如user、author、animation等）。在大多數情況下，你可以忽略這個參數。

在JavaScript中，可以使用getComputedStyle方法來獲取CSS中的變量。下面是一個示例代碼：

// 獲取CSS變量的值
const element = document.querySelector('.element');
const styles = getComputedStyle(element);
const variableValue = styles.getPropertyValue('--variable-name');// 使用獲取到的變量值
console.log(variableValue);

在上面的代碼中，首先使用querySelector方法選擇要獲取變量的元素。然后，使用getComputedStyle方法獲取該元素的計算樣式。最后，使用getPropertyValue方法傳入變量名來獲取變量的值。

請注意，變量名需要以雙橫線（–）開頭。在上面的代碼中，--variable-name是一個示例變量名，你需要將其替換為你實際使用的變量名。

在JavaScript中設置CSS變量的值可以通過以下幾種方法實現：

使用style屬性直接設置元素的CSS變量值：

element.style.setProperty('--variable-name', 'value');

其中，element是要設置CSS變量的元素，--variable-name是CSS變量的名稱，value是要設置的值。

使用document.documentElement.style.setProperty()方法設置全局的CSS變量值：

document.documentElement.style.setProperty('--variable-name', 'value');

這種方法會將CSS變量的值應用到整個文檔中。

使用CSSStyleSheet.insertRule()方法動態插入CSS規則來設置CSS變量的值：

const styleSheet = document.styleSheets[0];
styleSheet.insertRule(':root { --variable-name: value; }', styleSheet.cssRules.length);

其中，:root選擇器表示文檔的根元素，--variable-name是CSS變量的名稱，value是要設置的值。

使用CSSStyleSheet.addRule()方法動態添加CSS規則來設置CSS變量的值：

const styleSheet = document.styleSheets[0];
styleSheet.addRule(':root', '--variable-name: value;');

這種方法與上一種方法類似，只是使用了不同的語法。

請注意，以上方法中的--variable-name是CSS變量的名稱，value是要設置的值。你可以根據需要自行替換。

如何用Js設置和獲取CSS的變量

可以使用JavaScript來設置和獲取CSS變量。下面是一個示例：

設置CSS變量：

document.documentElement.style.setProperty('--footer-color', 'blue');

獲取CSS變量：

var footerColor = getComputedStyle(document.documentElement).getPropertyValue('--footer-color');
console.log(footerColor);

這里的--footer-color是一個CSS變量的名稱，可以根據需要自定義。通過setProperty方法可以設置CSS變量的值，而getComputedStyle方法可以獲取CSS變量的值。

在JavaScript中設置和獲取CSS變量（也稱為CSS自定義屬性）可以通過操作元素的style屬性或使用getPropertyValue和setProperty方法來完成。CSS變量通常以兩個連字符開頭（例如，--my-variable）。

設置CSS變量

要設置CSS變量，可以直接在元素的style屬性上設置它，或者使用CSSStyleDeclaration的setProperty方法。

示例1：通過`style`屬性設置

// 獲取元素
const element = document.querySelector('.my-element');// 設置CSS變量
element.style.setProperty('--my-variable', '10px');

示例2：通過`style`屬性直接設置（注意：這種方法可能不被所有瀏覽器支持）

// 獲取元素
const element = document.querySelector('.my-element');// 設置CSS變量（注意：這種方法可能不起作用，因為CSS變量名通常包含連字符）
// 更推薦使用 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（如果之前設置了該值）

注意事項

當你在JavaScript中通過element.style設置CSS變量時，你是在元素的行內樣式上設置它。這意味著它將覆蓋在外部或內部樣式表中為該元素設置的相同CSS變量。
如果你想要獲取在外部或內部樣式表中設置的CSS變量的值，而不是行內樣式中設置的值，你可能需要使用getComputedStyle方法。

示例：使用`getComputedStyle`獲取CSS變量的值

// 獲取元素
const element = document.querySelector('.my-element');// 獲取計算后的樣式
const computedStyle = getComputedStyle(element);// 獲取CSS變量的值
const value = computedStyle.getPropertyValue('--my-variable');console.log(value); // 輸出在樣式表中設置的值，或者如果沒有設置則輸出默認值

如何用Js操作style標簽

在JavaScript中操作<style>標簽可以通過多種方式實現，包括創建新的<style>元素、修改現有的<style>元素的內容，或者使用CSSOM（CSS Object Model）來動態地改變樣式。以下是一些基本示例：

創建并添加新的`<style>`元素

你可以創建一個新的<style>元素，設置其innerHTML來包含CSS規則，然后將其添加到DOM中。

// 創建一個新的<style>元素
const styleElement = document.createElement('style');// 設置<style>元素的CSS內容
styleElement.innerHTML = `body {background-color: lightblue;}
`;// 將<style>元素添加到<head>中
document.head.appendChild(styleElement);

修改現有的`<style>`元素

如果你已經有一個<style>元素并且想要修改它的內容，你可以通過選擇該元素并更改其innerHTML來實現。

// 獲取現有的<style>元素（假設它有一個id）
const existingStyleElement = document.getElementById('my-style');// 修改<style>元素的CSS內容
existingStyleElement.innerHTML = `h1 {color: red;}
`;

使用CSSOM動態改變樣式

除了直接操作<style>標簽外，你還可以使用CSSOM來動態地改變頁面上元素的樣式。這通常是通過修改元素的style屬性來實現的。

// 獲取元素并改變其樣式
const myElement = document.getElementById('my-element');
myElement.style.backgroundColor = 'yellow'; // 將背景色改為黃色
myElement.style.fontSize = '20px'; // 更改字體大小

請注意，通過元素的style屬性設置的樣式是內聯樣式，它們會覆蓋外部和內部樣式表中的樣式（除非后者使用了!important規則）。

操作`<style>`標簽中的特定規則

如果你想要更精細地控制<style>標簽中的CSS規則，你可能需要使用更高級的CSSOM方法，如insertRule和deleteRule。這些方法允許你向現有的<style>元素添加或刪除特定的CSS規則。

// 獲取現有的<style>元素（或創建一個新的）
const styleElement = document.getElementById('my-style') || document.createElement('style');
document.head.appendChild(styleElement); // 如果是新創建的，則添加到<head>中// 獲取<style>元素的sheet屬性（一個CSSStyleSheet對象）
const styleSheet = styleElement.sheet;// 使用insertRule方法添加一個新的CSS規則
styleSheet.insertRule('p { color: green; }', 0); // 在規則列表的開頭添加新規則// 使用deleteRule方法刪除一個CSS規則（需要知道規則的索引）
// styleSheet.deleteRule(0); // 刪除索引為0的規則（這里只是演示，實際上你可能不想立即刪除它）

請注意，insertRule和deleteRule方法可能因瀏覽器而異，并且在使用它們時需要確保<style>元素已經被添加到文檔中（即其sheet屬性是可訪問的）。

讓我們逐一了解CSSStyleElement、insertRule()以及CSSStyleDeclaration。

CSSStyleElement

CSSStyleElement是表示HTML <style> 元素的接口。這個接口繼承自HTMLElement，并且添加了與樣式表相關的屬性和方法。雖然實際上在瀏覽器中并不存在名為CSSStyleElement的具體接口（截至我的最后更新日期），但<style>元素通常是通過HTMLStyleElement接口來表示的。這可能是對HTMLStyleElement的一個誤解或混淆。

HTMLStyleElement具有一些屬性和方法，如sheet，它返回一個CSSStyleSheet對象，代表該<style>元素包含的樣式表。

insertRule()

insertRule()方法是CSSStyleSheet接口的一部分，而不是CSSStyleElement或HTMLStyleElement。這個方法用于向樣式表中插入新的CSS規則。它接受兩個參數：

rule：一個字符串，表示要插入的CSS規則。
index：一個整數，表示在樣式表的哪個位置插入新規則。如果省略此參數，則新規則將被添加到樣式表的末尾。

使用insertRule()的一個例子：

// 假設我們有一個<style>元素
let styleElement = document.querySelector('style');// 獲取與該<style>元素相關聯的樣式表
let styleSheet = styleElement.sheet;// 使用insertRule()在樣式表的開頭插入一條新規則
styleSheet.insertRule('body { background-color: lightgreen; }', 0);

這將把背景顏色設置為淺綠色的規則添加到<style>元素關聯的樣式表的開頭。

CSSStyleDeclaration

CSSStyleDeclaration是一個接口，表示一個CSS聲明塊，它是一個包含一組CSS屬性和值的對象。通常，你可以通過訪問HTML元素的style屬性來獲取一個CSSStyleDeclaration對象。這個對象包含一組對應于CSS屬性和值的方法和屬性，允許你讀取、修改和添加內聯樣式。

例如：

// 獲取一個HTML元素
let element = document.querySelector('div');// 獲取該元素的CSSStyleDeclaration對象
let style = element.style;// 設置背景顏色和內邊距
style.backgroundColor = 'red';
style.padding = '10px';