Document: styleSheets property

Giá trị

Danh sách trả về được sắp xếp như sau:

• Các StyleSheet lấy từ header Link được đặt đầu tiên, sắp xếp theo thứ tự header.
• Các StyleSheet lấy từ DOM được đặt sau, sắp xếp theo thứ tự cây.

Ví dụ

Truy xuất một bảng kiểu cụ thể theo tiêu đề

function getStyleSheet(uniqueTitle) {
  for (const sheet of document.styleSheets) {
    if (sheet.title === uniqueTitle) {
      return sheet;
    }
  }
}

Truy cập các quy tắc trong bảng kiểu

Bạn có thể truy cập các bảng kiểu và quy tắc của chúng một cách riêng lẻ bằng cách sử dụng các đối tượng stylesheet, style và CSSRule, như được minh họa trong ví dụ này, in ra tất cả các bộ chọn quy tắc kiểu lên console.

for (const styleSheet of document.styleSheets) {
  for (const rule of styleSheet.cssRules) {
    console.log(`${rule.selectorText}\n`);
  }
}

Đối với một tài liệu có một bảng kiểu duy nhất trong đó ba quy tắc sau được định nghĩa:

body {
  background-color: darkblue;
}
p {
  font-family: "Arial";
  font-size: 10pt;
  margin-left: 0.125in;
}
#lumpy {
  display: none;
}

Tập lệnh này xuất ra kết quả sau:

BODY
P
#LUMPY

Đặc tả kỹ thuật

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