TypeError Uncaught: Non è possibile impostare lo stile di proprietà di # <HTMLElement> che ha solo un getter

Question

Il seguente codice non riesce a Chrome, Safari, funziona bene in Firefox

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

<p>background should be green</p>

Rimuovere il "usando rigorosa" e funziona.

È un bug in Chrome e Safari o un bug in Firefox? MDN says setting the style is valid.

Answer 1

Problema

Non tutti i browser supportano l'assegnazione di assegnazione di una stringa che contiene una rappresentazione testuale di un blocco di dichiarazione CSS per la proprietà style.

element.style = styleString; // Might not work 

Soluzione

Per risolvere il problema, è possibile impostarlo come attributo di contenuti, o alla proprietà cssText:

element.setAttribute('style', styleString); 

element.style.cssText = styleString; 

Comportamento standard

Su vecchi browser compatibili con DOM L2 Stile e ES5, l'assegnazione dovrebbe

• gettare in modalità rigorosa
• essere ignorato in modalità non rigorosa.

nei browser più recenti compatibili con CSSOM e ES5, l'assegnazione dovrebbe

• funziona sempre

Tutti i dettagli

Secondo il DOM Level 2 Style spec, la proprietà style è definito nell'interfaccia ElementCSSInlineStyle come segue:

interface ElementCSSInlineStyle { 
    readonly attribute CSSStyleDeclaration style; 
}; 

conseguenza, la proprietà style dovrebbe essere implementato come un accessor property con un getter, ma senza un regolatore.

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

Secondo ECMAScript 5, quando si tenta di assegnare un valore a una proprietà del genere, un errore deve essere gettato in modalità rigorosa:

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.

Tuttavia, DOM L2 Style è sostituita dalla più recente CSS Object Model (CSSOM).

Secondo il che specifica, l'attributo style IDL dell'interfaccia ElementCSSInlineStyle, implementata da HTMLElement, è definito come un [PutForwards] attributo esteso:

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

Ciò significa che l'impostazione della proprietà style deve comportarsi come impostazione della cssText uno dei CSSStyleDeclaration. Pertanto, quelli devono essere equivalenti:

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

Ed è per questo che funziona sui nuovi browser.