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