CSSFunctionDeclarations

Khả dụng hạn chế

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Giao diện CSSFunctionDeclarations của CSS Object Model đại diện cho một chuỗi khai báo CSS liên tục được bao gồm trong phần thân @function.

Điều này có thể bao gồm thuộc tính tùy chỉnh CSS và giá trị của descriptor results bên trong phần thân @function, nhưng không bao gồm các khối như at-rule @media có thể được bao gồm. Một khối như vậy, được bao gồm ở giữa một tập hợp khai báo, sẽ khiến nội dung phần thân bị chia thành các đối tượng CSSFunctionDeclarations riêng biệt, như được thấy trong bản demo Multiple CSSFunctionDeclarations của chúng ta.

Thuộc tính phiên bản

Giao diện này cũng kế thừa các thuộc tính từ CSSRule.

CSSFunctionDeclarations.style Read only Thử nghiệm: Trả về một đối tượng CSSFunctionDescriptors đại diện cho các descriptor có sẵn trong phần thân at-rule @function.

Ví dụ

Sử dụng cơ bản `CSSFunctionDeclarations`

Trong ví dụ này, chúng ta định nghĩa một hàm CSS tùy chỉnh và sau đó truy cập các khai báo của nó bằng CSSOM.

CSS

CSS của chúng ta định nghĩa một hàm tùy chỉnh sử dụng at-rule @function. Hàm được gọi là --lighter() và xuất ra phiên bản sáng hơn của một màu đầu vào.

css

@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);
}

JavaScript

// 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);

Nhiều `CSSFunctionDeclarations`

Trong ví dụ này, chúng ta cho thấy cách một at-rule @media được chèn vào giữa một tập hợp khai báo gây ra hai đối tượng CSSFunctionDeclarations được tạo ra.

CSS

css

@function --bar() {
  --x: 42;
  result: var(--y);
  @media (width > 1000px) {
    /* ... */
  }
  --y: var(--x);
}

JavaScript

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

// Accessing both CSSFunctionDeclarations
console.log(cssFunc.cssRules);

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