lỗi chưa gặp: Không thể thiết lập phong cách sở hữu của # <HTMLElement> mà chỉ có một getter

Question

Các mã sau thất bại trong Chrome, Safari, hoạt động tốt trong Firefox

"use strict"; 
 
document.body.style = "background-color: green;";

<p>background should be green</p>

Tháo "sử dụng nghiêm ngặt" Và nó hoạt động.

Đó có phải là lỗi trong Chrome và Safari hoặc lỗi trong Firefox không? MDN says setting the style is valid.

Answer 1

Vấn đề

Không phải tất cả các trình duyệt hỗ trợ gán gán một chuỗi trong đó có một đại diện văn bản của một khối khai CSS cho style tài sản.

element.style = styleString; // Might not work 

Cách giải quyết

Là một khắc phục, bạn có thể thiết lập nó như là một thuộc tính nội dung, hoặc đến cssText tài sản:

element.setAttribute('style', styleString); 

element.style.cssText = styleString; 

hành vi tiêu chuẩn

Mở trình duyệt cũ phù hợp với DOM Phong cách L2 và ES5, sự phân công nên

• Ném ở chế độ nghiêm ngặt
• Hãy bỏ qua trong chế độ không nghiêm ngặt.

Trên các trình duyệt mới hơn phù hợp với CSSOM và ES5, sự phân công nên

• Luôn làm việc

Chi tiết đầy đủ

Theo DOM Level 2 Style spec, các style tài sản là được xác định trong giao diện ElementCSSInlineStyle như sau:

interface ElementCSSInlineStyle { 
    readonly attribute CSSStyleDeclaration style; 
}; 

Do đó, tài sản style phải được thực hiện dưới dạng accessor property với bộ nạp nhưng không có bộ phận đặt.

Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'style'); /* { 
    configurable: true, 
    enumerable: true, 
    get: function(){...}, 
    set: undefined 
} */ 

Theo ECMAScript 5, khi bạn cố gắng gán một số giá trị cho một tài sản như vậy, lỗi phải được ném vào chế độ nghiêm ngặt:

When an assignment occurs within strict mode code , [...] the LeftHandSide also may not be a reference [...] to an accessor property with the attribute value {[[Set]]:undefined} [...]. In these cases a TypeError exception is thrown.

Tuy nhiên, DOM L2 Phong cách được thay thế bởi phiên bản mới hơn Mô hình đối tượng CSS (CSSOM).

Theo spec đó, style IDL thuộc tính của giao diện ElementCSSInlineStyle, thực hiện bởi HTMLElement, được định nghĩa là một [PutForwards] thuộc tính mở rộng:

[NoInterfaceObject] 
interface ElementCSSInlineStyle { 
    [SameObject, PutForwards= cssText ] readonly attribute CSSStyleDeclaration style ; 
};

đó có nghĩa là thiết lập các style tài sản phải cư xử như thiết lập các cssText một trong số CSSStyleDeclaration. Do đó, những nội dung đó phải tương đương:

element.style = styleString; 
element.style.cssText = styleString; 

Và đó là lý do tại sao nó hoạt động trên các trình duyệt mới hơn.