CSSFunctionRule

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ừ CSSGroupingRule.

CSSFunctionRule.name Read only Experimental

Trả về chuỗi đại diện cho tên của hàm tùy chỉnh.

CSSFunctionRule.returnType Read only Experimental

Trả về chuỗi đại diện cho kiểu trả về của hàm tùy chỉnh.

Phương thức phiên bản

Giao diện này cũng kế thừa các phương thức từ CSSGroupingRule.

CSSFunctionRule.getParameters() Experimental

Trả về mảng các đối tượng đại diện cho các tham số của hàm tùy chỉnh.

Ví dụ

Sử dụng cơ bản CSSFunctionRule

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 nó bằng CSSOM.

CSS

CSS của chúng ta định nghĩa một hàm tùy chỉnh bằ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àu đầu vào. --lighter() nhận hai tham số, <color> và <number>. Nó trả về màu oklch() được tạo bằng cú pháp màu tương đối; màu đầu vào được chuyển thành màu oklch() và kênh độ sáng của nó tăng lên theo số đầu vào.

@function --lighter(--color <color>, --lightness-adjust <number>: 0.2) returns
  <color> {
  result: oklch(from var(--color) calc(l + var(--lightness-adjust)) c h);
}

JavaScript

Script của chúng ta bắt đầu bằng cách lấy tham chiếu đến bảng kiểu được gắn vào tài liệu bằng HTMLStyleElement.sheet, sau đó lấy tham chiếu đến quy tắc duy nhất trong bảng kiểu, là CSSFunctionRule, thông qua CSSStylesheet.cssRules. Sau đó chúng ta ghi mỗi thành viên CSSFunctionRule vào console.

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

• Thuộc tính name bằng --lighter.
• Thuộc tính returnType bằng <color>.
• Phương thức getParameters() trả về mảng trông như thế này:
  js

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

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• @function
• CSSFunctionDescriptors
• CSSFunctionDeclarations