Uncaught Typeerror: Kann nicht gesetzt Eigenschaft Stil # <HTMLElement>, die nur einen Getter hat

Question

Der folgende Code nicht in Chrome, Safari, funktioniert in Firefox

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

<p>background should be green</p>

Entfernen Sie die "mit strengen" und es funktioniert.

Ist das ein Bug in Chrome und Safari oder ein Bug in Firefox? MDN says setting the style is valid.

Answer 1

Problem

Nicht alle Browser unterstützen die Zuweisung einer Zeichenfolge zuweisen, die eine Textdarstellung eines CSS Deklarationsblock zum style Eigenschaft enthält.

element.style = styleString; // Might not work 

Umgehung

Als Abhilfe können Sie es als Content-Attribut gesetzt, oder auf die cssText Eigenschaft:

element.setAttribute('style', styleString); 

element.style.cssText = styleString; 

Standardverhalten

Bei älteren Browsern kompatibel mit DOM L2-Art und ES5, sollte die Zuordnung

• Wurf im Strict-Modus
• Be in nicht-Strict-Modus ignoriert.

Bei neueren Browsern kompatibel mit CSSOM und ES5, sollte die Zuordnung

• arbeitet immer

Vollständige Details

Nach dem DOM Level 2 Style spec, die style Eigenschaft ist definiert in der ElementCSSInlineStyle Schnittstelle wie folgt:

interface ElementCSSInlineStyle { 
    readonly attribute CSSStyleDeclaration style; 
}; 

Daher ist die style Eigenschaft sollte als accessor property mit einem Getter umgesetzt werden, aber ohne Setter.

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

Nach ECMAScript 5, wenn Sie versuchen, einen gewissen Wert auf eine Eigenschaft, so zu vergeben, ein Fehler muss im strikten Modus geworfen werden:

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.

jedoch DOM L2 Stil durch die neuere ersetzt wird CSS-Objektmodell (CSSOM).

Nach der dieser Spezifikation, die style IDL-Attribut der Schnittstelle ElementCSSInlineStyle, durch HTMLElement implementiert, wird als [PutForwards] erweiterte Attribut definiert:

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

Das bedeutet, dass die style-Eigenschaft wie Einstellung verhalten muss die cssText einer der CSSStyleDeclaration. Daher müssen diese gleich sein:

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

Und das ist, warum es auf neueren Browsern funktioniert.