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)。