MathMLElement: thuộc tính style

Giá trị

Một đối tượng CSSStyleProperties trực tiếp.

Mặc dù thuộc tính style tự nó là chỉ đọc theo nghĩa bạn không thể thay thế đối tượng CSSStyleProperties, bạn vẫn có thể gán cho thuộc tính style trực tiếp, điều này tương đương với việc gán cho thuộc tính cssText của nó. Bạn cũng có thể sửa đổi đối tượng CSSStyleProperties bằng các phương thức setProperty() và removeProperty().

Mô tả

Các giá trị của các kiểu nội tuyến được đặt trong thuộc tính style của phần tử được phản ánh bởi các thuộc tính tương ứng của đối tượng CSSStyleProperties được trả về.

Các thuộc tính CSS viết tắt của phần tử được mở rộng thành các thuộc tính dài tương ứng.

Thuộc tính style là chỉ đọc, nghĩa là không thể gán đối tượng CSSStyleProperties cho nó. Tuy nhiên, có thể đặt kiểu nội tuyến bằng cách gán chuỗi trực tiếp cho thuộc tính. Trong trường hợp này, chuỗi có thể được đọc từ cssText. Sử dụng style theo cách này sẽ ghi đè hoàn toàn tất cả các kiểu nội tuyến trên phần tử.

Để thêm các kiểu cụ thể vào phần tử mà không làm thay đổi các giá trị kiểu khác, thông thường tốt hơn là đặt các thuộc tính riêng lẻ trên đối tượng CSSStyleProperties. Ví dụ, bạn có thể viết element.style.backgroundColor = "red". Khai báo kiểu được đặt lại bằng cách đặt nó thành null hoặc chuỗi rỗng, ví dụ: element.style.color = null.

Ví dụ

Liệt kê thông tin kiểu

Ví dụ này minh họa cách chúng ta có thể liệt kê các thuộc tính tên có gạch nối của CSSStyleProperties.

HTML

<math>
  <mrow>
    <mi>f</mi>
    <mo stretchy="false">(</mo>
    <mi class="parameter" style="color: red; border-bottom: 1px solid">x</mi>
    <mo stretchy="false">)</mo>
    <mo>=</mo>
    <mi>x</mi>
  </mrow>
</math>
<pre id="log"></pre>

#log {
  height: 80px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

Đoạn mã sau lặp lại các thuộc tính có thể liệt kê của CSSStyleProperties và ghi lại kết quả.

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

const element = document.querySelector(".parameter");
const elementStyle = element.style;

// Loop through all the element's styles using `for...in`
for (const prop in elementStyle) {
  // Check the property belongs to the CSSStyleProperties instance
  // Ensure the property is a numeric index (indicating a dash-named/inline style)
  if (
    Object.hasOwn(elementStyle, prop) &&
    !Number.isNaN(Number.parseInt(prop, 10))
  ) {
    log(
      `${
        elementStyle[prop]
      } = '${elementStyle.getPropertyValue(elementStyle[prop])}'`,
    );
  }
}

Kết quả

Kết quả được hiển thị bên dưới. Lưu ý rằng chỉ các thuộc tính CSS dài của phần tử mới là các giá trị có thể liệt kê (thuộc tính viết tắt nội tuyến không được liệt kê).

Thông số kỹ thuật

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

Xem thêm

• Sử dụng thông tin kiểu động
• HTMLElement.style
• SVGElement.style
• MathMLElement.attributeStyleMap