SVGElement: thuộc tính style

Giá trị

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

Mặc dù bản thân thuộc tính style 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 trực tiếp cho thuộc tính style, 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 style 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. Ví dụ, một phần tử với style "border-top: 1px solid black" sẽ được biểu diễn trong đối tượng trả về bởi các thuộc tính có tên border-top và borderTop, và các thuộc tính dài tương ứng border-top-color và borderTopColor, border-top-style và borderTopStyle, và border-top-width và borderTopWidth.

Thuộc tính style là chỉ đọc, có nghĩa là không thể gán đối tượng CSSStyleProperties cho nó. Tuy nhiên, có thể đặt style nội tuyến bằng cách gán một 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ả style nội tuyến trên phần tử.

Để thêm style cụ thể vào phần tử mà không thay đổi các giá trị style khác, thường nên đặ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". Một khai báo style đượ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.

Thuộc tính style có cùng mức ưu tiên trong CSS cascade với một khai báo style nội tuyến được đặt qua thuộc tính style.

Ví dụ

Liệt kê thông tin style

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 dấu gạch ngang của CSSStyleProperties.

HTML

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 250 250"
  width="250"
  height="250">
  <circle
    cx="100"
    cy="100"
    r="50"
    id="circle"
    style="fill: red; stroke: black; stroke-width: 2px;" />
</svg>
<pre id="log"></pre>

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

JavaScript

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

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

const element = document.querySelector("circle");
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ả 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ử được 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 style động
• HTMLElement.style
• MathMLElement.style
• SVGElement.attributeStyleMap