CSSFunctionDescriptors

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性： 這是一項實驗性技術
在生產中使用此技術之前，請仔細檢查瀏覽器相容性表格。

CSSFunctionDescriptors 介面是 CSS 物件模型的一部分，它表示由 CSSFunctionDeclarations 物件表示的一組 CSS 宣告中包含的描述符。

可以透過 CSSFunctionDeclarations.style 屬性訪問 CSSFunctionDescriptors 物件。

例項屬性

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

CSSFunctionDescriptors.result 只讀實驗性質: 如果關聯的宣告集中存在 result 描述符，則返回一個表示它的字串。

示例

`CSSFunctionDescriptors` 的基本用法

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

CSS

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

css

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

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.result);

最值得注意的是，result 屬性等於 @function 主體的 result 描述符，即 oklch(from var(--color) calc(l + var(--lightness-adjust)) c h)。