1. Web
  2. Web API
  3. CSS Typed Object Model API

CSS Typed Object Model API

Khả dụng hạn chế

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

CSS Typed Object Model API đơn giản hóa thao tác thuộc tính CSS bằng cách biểu thị các giá trị CSS dưới dạng các đối tượng JavaScript có kiểu thay vì chuỗi. Điều này không chỉ đơn giản hóa thao tác CSS mà còn giảm thiểu tác động tiêu cực đến hiệu suất so với HTMLElement.style.

Nói chung, các giá trị CSS có thể được đọc và ghi trong JavaScript dưới dạng chuỗi, điều này có thể chậm và cồng kềnh. CSS Typed Object Model API cung cấp các giao diện để tương tác với các giá trị cơ bản, bằng cách biểu diễn chúng với các đối tượng JS chuyên biệt có thể được thao tác và hiểu dễ dàng và đáng tin cậy hơn so với phân tích và nối chuỗi. Điều này dễ dàng hơn cho tác giả (ví dụ: các giá trị số được phản ánh với các số JS thực tế và có các phép toán toán học nhận thức đơn vị được định nghĩa cho chúng). Nó cũng thường nhanh hơn, vì các giá trị có thể được thao tác trực tiếp và sau đó được dịch lại thành các giá trị cơ bản mà không cần xây dựng và phân tích chuỗi CSS.

CSS Typed OM cho phép thao tác hiệu quả các giá trị được gán cho các thuộc tính CSS trong khi cho phép mã bảo trì được dễ hiểu và dễ viết hơn.

Giao diện

CSSStyleValue

Giao diện CSSStyleValue của CSS Typed Object Model API là lớp cơ sở của tất cả các giá trị CSS có thể truy cập thông qua Typed OM API. Một phiên bản của lớp này có thể được sử dụng ở bất kỳ đâu một chuỗi được mong đợi.

CSSStyleValue.parse()

Phương thức cho phép CSSNumericValue được xây dựng từ một chuỗi CSS. Nó đặt một thuộc tính CSS cụ thể thành các giá trị được chỉ định và trả về giá trị đầu tiên dưới dạng đối tượng CSSStyleValue.

CSSStyleValue.parseAll()

Phương thức đặt tất cả các lần xuất hiện của một thuộc tính CSS cụ thể thành giá trị được chỉ định và trả về một mảng các đối tượng CSSStyleValue, mỗi đối tượng chứa một trong các giá trị được cung cấp.

StylePropertyMap

Giao diện StylePropertyMap của CSS Typed Object Model API cung cấp biểu diễn của một khối khai báo CSS là một giải pháp thay thế cho CSSStyleDeclaration.

StylePropertyMap.set()

Phương thức thay đổi khai báo CSS với thuộc tính đã cho thành giá trị đã cho.

StylePropertyMap.append()

Phương thức thêm một khai báo CSS mới vào StylePropertyMap với thuộc tính và giá trị đã cho.

StylePropertyMap.delete()

Phương thức xóa khai báo CSS với thuộc tính đã cho khỏi StylePropertyMap.

StylePropertyMap.clear()

Phương thức xóa tất cả các khai báo trong StylePropertyMap.

CSSUnparsedValue

Giao diện CSSUnparsedValue của CSS Typed Object Model API đại diện cho các giá trị thuộc tính tham chiếu đến các thuộc tính tùy chỉnh. Nó bao gồm một danh sách các đoạn chuỗi và các tham chiếu biến.

Hàm khởi tạo CSSUnparsedValue()

Tạo một đối tượng CSSUnparsedValue mới đại diện cho các giá trị thuộc tính tham chiếu đến các thuộc tính tùy chỉnh.

CSSUnparsedValue.entries()

Phương thức trả về một mảng các cặp thuộc tính [key, value] của đối tượng theo cùng thứ tự như trong vòng lặp for...in.

CSSUnparsedValue.forEach()

Phương thức thực thi một hàm được cung cấp một lần cho mỗi phần tử của CSSUnparsedValue.

CSSUnparsedValue.keys()

Phương thức trả về một đối tượng array iterator mới chứa các khóa cho mỗi chỉ mục trong mảng.

Tuần tự hóa CSSKeywordValue

Giao diện CSSKeywordValue của CSS Typed Object Model API tạo ra một đối tượng để biểu diễn các từ khóa CSS và các định danh khác.

Hàm khởi tạo CSSKeywordValue()

Hàm khởi tạo tạo một đối tượng CSSKeywordValue() mới biểu diễn các từ khóa CSS và các định danh khác.

CSSKeywordValue.value()

Thuộc tính của giao diện CSSKeywordValue trả về hoặc đặt giá trị của CSSKeywordValue.

Giao diện CSSStyleValue

CSSStyleValue là lớp cơ sở thông qua đó tất cả các giá trị CSS được biểu diễn. Các lớp con bao gồm:

CSSImageValue

Giao diện biểu diễn các giá trị cho các thuộc tính nhận hình ảnh, ví dụ background-image, list-style-image hoặc border-image-source.

CSSKeywordValue

Giao diện tạo ra một đối tượng biểu diễn các từ khóa CSS và các định danh khác. Khi được sử dụng ở nơi một chuỗi được mong đợi, nó sẽ trả về giá trị của CSSKeyword.value.

CSSMathValue

Một cây con lớp biểu diễn các giá trị số phức tạp hơn một giá trị và đơn vị duy nhất, bao gồm:

CSSNumericValue

Giao diện biểu diễn các phép toán mà tất cả các giá trị số có thể thực hiện, bao gồm:

CSSPositionValue

Biểu diễn các giá trị cho các thuộc tính nhận một vị trí, ví dụ object-position.

CSSTransformValue

Giao diện biểu diễn một danh sách các giá trị transform. Chúng "chứa" một hoặc nhiều CSSTransformComponent, biểu diễn các giá trị hàm transform riêng lẻ.

CSSUnitValue

Giao diện biểu diễn các giá trị số có thể được biểu diễn dưới dạng một đơn vị duy nhất hoặc một số được đặt tên và phần trăm.

CSSUnparsedValue

Biểu diễn các giá trị thuộc tính tham chiếu thuộc tính tùy chỉnh. Nó bao gồm một danh sách các đoạn chuỗi và các tham chiếu biến.

Thông số kỹ thuật

Thông số kỹ thuật
CSS Typed OM Level 1
# stylevalue-objects
CSS Typed OM Level 1
# the-stylepropertymap
CSS Typed OM Level 1
# cssunparsedvalue
CSS Typed OM Level 1
# keywordvalue-objects

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

api.CSSStyleValue

api.StylePropertyMap

api.CSSUnparsedValue

api.CSSKeywordValue

Xem thêm

Help improve MDN

Tìm hiểu cách đóng góp

Trang này được sửa đổi lần cuối vào bởi những người đóng góp MDN.

Xem trang này trên GitHub • Báo cáo sự cố với nội dung này