StylePropertyMapReadOnly

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

StylePropertyMapReadOnly.size

Trả về một số nguyên dương chứa kích thước của đối tượng StylePropertyMapReadOnly.

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

StylePropertyMapReadOnly.entries()

Trả về một mảng các cặp [key, value] thuộc tính liệt kê riêng của đối tượng, theo cùng thứ tự như vòng lặp for...in (điểm khác biệt là vòng lặp for-in cũng duyệt qua các thuộc tính trong chuỗi prototype).

StylePropertyMapReadOnly.forEach()

Thực thi một hàm được cung cấp một lần cho mỗi phần tử của StylePropertyMapReadOnly.

StylePropertyMapReadOnly.get()

Trả về giá trị của thuộc tính được chỉ định.

StylePropertyMapReadOnly.getAll()

Trả về một mảng các đối tượng CSSStyleValue chứa các giá trị của thuộc tính được cung cấp.

StylePropertyMapReadOnly.has()

Cho biết liệu thuộc tính được chỉ định có tồn tại trong đối tượng StylePropertyMapReadOnly hay không.

StylePropertyMapReadOnly.keys()

Trả về một iterator mảng mới chứa các khóa của mỗi phần tử trong StylePropertyMapReadOnly.

StylePropertyMapReadOnly.values()

Trả về một iterator mảng mới chứa các giá trị của mỗi chỉ mục trong đối tượng StylePropertyMapReadOnly.

Ví dụ

Chúng ta cần có một phần tử để quan sát:

<p>
  This is a paragraph with some text. We can add some CSS, or not. The style map
  will include all the default and inherited CSS property values.
</p>
<dl id="output"></dl>

Thêm một chút CSS với thuộc tính tùy chỉnh để minh họa kết quả rõ hơn:

p {
  --some-variable: 1.6em;
  --some-other-variable: translateX(33vw);
  --another-variable: 42;
  line-height: var(--some-variable);
}

Thêm JavaScript để lấy đoạn văn và trả về danh sách định nghĩa của tất cả các giá trị thuộc tính CSS mặc định bằng Element.computedStyleMap().

// get the element
const myElement = document.querySelector("p");

// get the <dl> we'll be populating
const stylesList = document.querySelector("#output");

// Retrieve all computed styles with computedStyleMap()
const stylePropertyMap = myElement.computedStyleMap();

// iterate through the map of all the properties and values, adding a <dt> and <dd> for each
for (const [prop, val] of stylePropertyMap) {
  // properties
  const cssProperty = document.createElement("dt");
  cssProperty.innerText = prop;
  stylesList.appendChild(cssProperty);

  // values
  const cssValue = document.createElement("dd");
  cssValue.innerText = val;
  stylesList.appendChild(cssValue);
}

Thông số kỹ thuật

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