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