Yakalanmayan TypeError: Aşağıdaki kod Chrome, Safari başarısız

Question

sadece bir alıcı vardır # kümesi olamaz mülkiyet tarzı,

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

<p>background should be green</p>

Kaldır "sıkı kullanarak" Firefox'ta çalışıyor ve çalışıyor.

Bu, Chrome ve Safari'de bir hata mı, yoksa Firefox'ta bir hata mı? MDN says setting the style is valid.

Answer 1

Sorun

Tüm tarayıcılar style özelliğine CSS beyanı bloğunun metin biçimini içeren bir dize atama atama destekler. Geçici bir çözüm olarak geçici çözüm

element.style = styleString; // Might not work 

, Bir içerik özelliği olarak ayarlayın, ya da cssText mülke:

element.setAttribute('style', styleString); 

element.style.cssText = styleString; 

Standart davranış

DOM L2 Stil ve ES5 uyumlu eski tarayıcılarda, atama

olmayan katı modda katı modda

• Atma göz ardı edilmelidir.
CSSOM ve ES5 uyumlu yeni tarayıcılarda

, atama

• Daima style özelliktir DOM Level 2 Style özelliklerine göre

Tam ayrıntıları

çalışması gerekir ElementCSSInlineStyle arayüzünde aşağıdaki gibi tanımlanmıştır:

interface ElementCSSInlineStyle { 
    readonly attribute CSSStyleDeclaration style; 
}; 

Dolayısıyla style tesiste gaz giderici bir accessor property olarak değil, setter olmadan uygulanmalıdır. Böyle bir özelliğe bazı değerini atamaya çalışırsanız ECMAScript 5 göre

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

bir hata katı modda atılmalıdır:

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.

Ancak DOM L2 Stili yeni yerini almaktadır CSS Nesne Modeli (CSSOM).

bu özelliğe göre, HTMLElement tarafından uygulanan arayüzünün ElementCSSInlineStyle ait style IDL niteliği, bir [PutForwards] genişletilmiş özellik olarak tanımlanır: style özelliğini ayarlayarak ayarı gibi davranır gerektiği anlamına gelir

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

cssTextCSSStyleDeclaration'dan biri. Bu nedenle, bunlar eşdeğer olmalıdır:

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

Bu nedenle, yeni tarayıcılarda çalışır.