Uncaught TypeError: nie można ustawić styl własność # <HTMLElement> który ma tylko getter

Question

Poniższy kod nie działa w Chrome, Safari, działa dobrze w Firefox

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

<p>background should be green</p>

Usuń "przy użyciu ścisłe" i to działa.

Czy to błąd w Chrome i Safari lub błąd w Firefoksie? MDN says setting the style is valid.

Answer 1

Problem

nie wszystkie przeglądarki obsługują przypisywanie przypisywanie ciąg, który zawiera tekstową reprezentację bloku deklaracji CSS do nieruchomości style.

element.style = styleString; // Might not work 

Obejście

Jako obejście, można ustawić go jako atrybut zawartości lub właściwości cssText:

element.setAttribute('style', styleString); 

element.style.cssText = styleString; 

zachowanie standardowe

Na starszych przeglądarek zgodnych z DOM L2 Style i ES5, przypisanie powinno

• rzucać w trybie ścisłym
• być ignorowane w trybie non-ścisłym.

W nowszych przeglądarek zgodnych z CSSOM i ES5, przypisanie powinno

• Zawsze pracować

pełne dane

Według DOM Level 2 Style specyfikacji właściwość style jest zdefiniowane w interfejsie ElementCSSInlineStyle w następujący sposób:

interface ElementCSSInlineStyle { 
    readonly attribute CSSStyleDeclaration style; 
}; 

Dlatego własność style powinny być realizowane jako accessor property z getter ale bez seter.

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

Według ECMAScript 5 podczas próby przypisać pewne wartości do właściwości takiego, błąd musi być wrzucony w trybie ścisłym:

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.

Jednak DOM L2 Style został zastąpiony przez nowszy Model obiektowy CSS (CSSOM).

Według tej specyfikacji, atrybut IDL style interfejsu ElementCSSInlineStyle, realizowany przez HTMLElement, jest zdefiniowany jako [PutForwards] rozszerzonego atrybutu:

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

Oznacza to, że ustawienie właściwości style musi zachowywać się jak ustawienie cssText jeden z CSSStyleDeclaration. Dlatego muszą one być równoważne:

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

I dlatego działa na nowszych przeglądarkach.