欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css3中的var()函數(shù)詳解

  發(fā)布時間：2024-05-21 17:17:32   作者：佚名   我要評論
在CSS3中，var()函數(shù)是一個用于插入CSS自定義屬性（也稱為CSS變量）的值的函數(shù),它允許你在樣式表中定義可重用的值，并在多個地方引用它們，從而使你的CSS更加靈活和可維護，這篇文章主要介紹了css3的var()函數(shù),需要的朋友可以參考下

css3的var()函數(shù)

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

變量可以在:root{}中定義, :root可以在css中創(chuàng)建全局樣式變量。通過 :root本身寫的樣式，相當(dāng)于 html，但優(yōu)先級比后者高。

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

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

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

例如，你可以在:root選擇器中定義一個自定義屬性，并在其他地方使用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;
}

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

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

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

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

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

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

基本語法

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

示例

以下是一個簡單的例子，展示了如何在 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;
}

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

動態(tài)更新

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

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

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

CSS3中的var()函數(shù)用于定義和使用自定義變量。它允許你在CSS樣式中使用變量，以便在多個地方重復(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ù)引用這些變量的值。

// 錯誤寫法
.test{
    --size: 20;
    font-size: var(--size)px;      // 這里的寫法是錯誤，這樣會讀取成font-size:20 px,值的中間會多了一個空格，導(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變量通常是以--*開頭的。

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

// 假設(shè)你有以下的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變量的值。

如果你想設(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變量只對該元素及其子元素有效，它們不會影響到文檔的其他部分。

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

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

獲取CSS變量

要獲取CSS中定義的變量值，你可以使用element.style.getPropertyValue()方法，但這僅適用于內(nèi)聯(lián)樣式中定義的變量。對于在: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變量的值

設(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è)置的變量只會影響到該元素及其子元素

如果你想要設(shè)置全局的CSS變量（即影響整個文檔的變量），你應(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è)置的變量將影響整個文檔

注意事項

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

在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中設(shè)置CSS變量的值可以通過以下幾種方法實現(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');

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

使用CSSStyleSheet.insertRule()方法動態(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()方法動態(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變量。下面是一個示例：

設(shè)置CSS變量：

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

獲取CSS變量：

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

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

在JavaScript中設(shè)置和獲取CSS變量（也稱為CSS自定義屬性）可以通過操作元素的style屬性或使用getPropertyValue和setProperty方法來完成。CSS變量通常以兩個連字符開頭（例如，--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變量（注意：這種方法可能不起作用，因為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（如果之前設(shè)置了該值）

注意事項

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

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

// 獲取元素
const element = document.querySelector('.my-element');
// 獲取計算后的樣式
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)簽可以通過多種方式實現(xiàn)，包括創(chuàng)建新的<style>元素、修改現(xiàn)有的<style>元素的內(nèi)容，或者使用CSSOM（CSS Object Model）來動態(tài)地改變樣式。以下是一些基本示例：

創(chuàng)建并添加新的<style>元素

你可以創(chuàng)建一個新的<style>元素，設(shè)置其innerHTML來包含CSS規(guī)則，然后將其添加到DOM中。

// 創(chuàng)建一個新的<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)有一個<style>元素并且想要修改它的內(nèi)容，你可以通過選擇該元素并更改其innerHTML來實現(xiàn)。

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

使用CSSOM動態(tài)改變樣式

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

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

請注意，通過元素的style屬性設(shè)置的樣式是內(nèi)聯(lián)樣式，它們會覆蓋外部和內(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)建一個新的）
const styleElement = document.getElementById('my-style') || document.createElement('style');
document.head.appendChild(styleElement); // 如果是新創(chuàng)建的，則添加到<head>中
// 獲取<style>元素的sheet屬性（一個CSSStyleSheet對象）
const styleSheet = styleElement.sheet;
// 使用insertRule方法添加一個新的CSS規(guī)則
styleSheet.insertRule('p { color: green; }', 0); // 在規(guī)則列表的開頭添加新規(guī)則
// 使用deleteRule方法刪除一個CSS規(guī)則（需要知道規(guī)則的索引）
// styleSheet.deleteRule(0); // 刪除索引為0的規(guī)則（這里只是演示，實際上你可能不想立即刪除它）

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

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

CSSStyleElement

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

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

insertRule()

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

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

使用insertRule()的一個例子：

// 假設(shè)我們有一個<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是一個接口，表示一個CSS聲明塊，它是一個包含一組CSS屬性和值的對象。通常，你可以通過訪問HTML元素的style屬性來獲取一個CSSStyleDeclaration對象。這個對象包含一組對應(yīng)于CSS屬性和值的方法和屬性，允許你讀取、修改和添加內(nèi)聯(lián)樣式。

例如：

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

在這個例子中，element.style返回一個CSSStyleDeclaration對象，我們可以使用它來修改元素的內(nèi)聯(lián)樣式。注意，這里修改的是元素的內(nèi)聯(lián)樣式，而不是在<style>標(biāo)簽或外部樣式表中定義的樣式。

總結(jié)一下，雖然你可能在查找資料時遇到了混淆或誤解，但希望以上關(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ù)實現(xiàn)動畫特效

    這篇文章主要介紹了CSS3通過var()和calc()函數(shù)實現(xiàn)動畫特效,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-03-29

  • 詳解利用css3的var()實現(xiàn)運行時改變scss的變量值

    這篇文章主要介紹了詳解利用css3的var()實現(xiàn)運行時改變scss的變量值，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨
    2021-03-02

最新評論