CSSFunctionDeclarations

例項屬性

此介面還繼承了 CSSRule 的屬性。

CSSFunctionDeclarations.style 只讀 實驗性

返回一個 CSSFunctionDescriptors 物件，該物件表示 @function 主體中可用的描述符。

示例

基本的 CSSFunctionDeclarations 用法

在此示例中，我們定義了一個 CSS 自定義函式，然後使用 CSSOM 訪問其宣告。

CSS

我們的 CSS 使用 @function at-rule 定義了一個自定義函式。該函式名為 --lighter()，它輸出輸入顏色的淺色版本。--lighter() 接受兩個引數，一個 <color> 和一個 <number>。它返回一個使用 相對顏色語法建立的 oklch() 顏色；輸入顏色被轉換為 oklch() 顏色，並且其亮度通道根據輸入數字增加。

@function --lighter(--color <color>, --lightness-adjust <number>: 0.2) returns
  <color> {
  --someVar: 100;
  result: oklch(from var(--color) calc(l + var(--lightness-adjust)) c h);
}

我們在函式中還包含了一個區域性的 自定義屬性 --someVar，雖然它沒有被使用，但它說明了當 @function 主體中存在多個連續宣告時會發生什麼。

JavaScript

我們的指令碼首先透過 HTMLStyleElement.sheet 獲取對附加到我們文件的樣式表的引用，然後透過 CSSStylesheet.cssRules 獲取對樣式表中唯一規則（即 CSSFunctionRule）的引用。

然後，我們使用 cssRules[0] 訪問表示函式內唯一連續宣告塊的 CSSFunctionDeclarations 物件，透過 CSSFunctionDeclarations.style 訪問其描述符資訊，然後訪問描述符長度和樣式資訊。所有這些資訊都會被記錄到控制檯。

// Get a CSSFunctionRule
const cssFunc = document.getElementById("css-output").sheet.cssRules[0];

// Accessing CSSFunctionDeclarations and CSSFunctionDescriptors
console.log(cssFunc.cssRules[0]); // CSSFunctionDeclarations
console.log(cssFunc.cssRules[0].style); // CSSFunctionDescriptors
console.log(cssFunc.cssRules[0].style.length);
console.log(cssFunc.cssRules[0].style.result);

最值得注意的是

• length 屬性等於 2，因為描述符文字有兩個部分（--someVar: 100; 和 result: oklch(from var(--color) calc(l + var(--lightness-adjust)) c h);）。
• result 屬性等於 @function 主體的 result 描述符，即 oklch(from var(--color) calc(l + var(--lightness-adjust)) c h)。

多個 CSSFunctionDeclarations

在此示例中，我們展示了一個 @media at-rule 插入到宣告集中間會如何生成兩個 CSSFunctionDeclarations 物件。

CSS

我們的 CSS 展示了一個來自規範的 @function 示例 --bar()，它並沒有什麼實際作用，但包含了一個被 @media 塊分隔的宣告集。

@function --bar() {
  --x: 42;
  result: var(--y);
  @media (width > 1000px) {
    /* ... */
  }
  --y: var(--x);
}

JavaScript

我們的指令碼首先透過 HTMLStyleElement.sheet 獲取對附加到我們文件的樣式表的引用，然後透過 CSSStylesheet.cssRules 獲取對樣式表中唯一規則（即 CSSFunctionRule）的引用。

然後，我們訪問 CSSGroupingRule.cssRules，並將其值記錄到控制檯。這將返回一個包含三個物件的 CSSRuleList 物件：

• 一個 CSSFunctionDeclarations 物件，表示 --x: 42;result: var(--y); 部分。
• 一個 CSSMediaRule 物件，表示 @media at-rule。
• 第二個 CSSFunctionDeclarations 物件，表示 --y: var(--x); 部分。

// Get a CSSFunctionRule
const cssFunc = document.getElementById("css-output").sheet.cssRules[0];

// Accessing both CSSFunctionDeclarations
console.log(cssFunc.cssRules);

然後，我們將每個 CSSFunctionDeclarations 物件的詳細資訊記錄到控制檯——物件本身、其 style 屬性中包含的 CSSFunctionDescriptors 物件，以及 CSSFunctionDescriptors.result 屬性。

console.log(cssFunc.cssRules[0]); // First CSSFunctionDeclarations
console.log(cssFunc.cssRules[0].style); // CSSFunctionDescriptors
console.log(cssFunc.cssRules[0].style.result);

console.log(cssFunc.cssRules[2]); // Second CSSFunctionDeclarations
console.log(cssFunc.cssRules[2].style); // CSSFunctionDescriptors
console.log(cssFunc.cssRules[2].style.result);

在第二種情況下，result 返回一個空字串，因為第二個宣告部分不包含 result 描述符。

規範

瀏覽器相容性

另見

• @function
• CSSFunctionRule
• CSSFunctionDescriptors