CSSFunctionRule

例項屬性

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

CSSFunctionRule.name 只讀 實驗性

返回一個字串，表示自定義函式的名稱。

CSSFunctionRule.returnType 只讀 實驗性

返回一個字串，表示自定義函式的返回型別。

例項方法

此介面還繼承了 CSSGroupingRule 的方法。

CSSFunctionRule.getParameters() 實驗性

返回一個物件陣列，表示自定義函式的引數。

示例

CSSFunctionRule 的基本用法

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

CSS

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

@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）的引用。之後，我們將 CSSFunctionRule 的每個成員記錄到控制檯中。

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

// Accessing CSSFunctionRule members
console.log(cssFunc.name);
console.log(cssFunc.returnType);
console.log(cssFunc.getParameters());

• name 屬性等於 --lighter。
• returnType 屬性等於 <color>。
• getParameters() 方法返回一個如下所示的陣列：
  js

  [
    { name: "--color", type: "<color>" },
    { defaultValue: "0.2", name: "--lightness-adjust", type: "<number>" },
  ];
  

規範

瀏覽器相容性

另見

• @function
• CSSFunctionDescriptors
• CSSFunctionDeclarations