Uncaught TypeError：无法设置＃< HTMLElement>的属性样式只有一个吸气 [英] Uncaught TypeError: Cannot set property style of #<HTMLElement> which has only a getter

问题描述

以下代码在Chrome，Safari中失败，在Firefox中正常运行

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

< p>背景应该是绿色的

它的工作原理。

这是Chrome和Safari中的错误还是Firefox中的错误？ MDN表示设置样式有效。

解决方案

问题浏览器支持向样式属性分配一个包含CSS声明块的文本表示的字符串。

  element.style = styleString; //可能不起作用
  

解决方法

作为解决方法，您可以将其设置为内容属性或

   lang-js prettyprint-override>  element.setAttribute（'style'，styleString）; 
  

element.style.cssText = styleString;


标准行为

在符合DOM L2 Style和ES5的旧版浏览器中，该作业应该是

• 以严格模式投放


• 在非严格模式下被忽略

在符合CSSOM和ES5的新浏览器中，分配应该

• 始终有效
  

全部详细信息

根据 DOM Level 2 Style 规范中， style 属性在 ElementCSSInlineStyle 接口，如下所示：

 接口ElementCSSInlineStyle {
只读属性CSSStyleDeclaration风格; 
}; 
  

因此，应该实现样式属性作为具有吸气剂的访问者财产，但没有setter。

Object.getOwnPropertyDescriptor（HTMLElement.prototype，'style'）; / * {
可配置：true，
enumerable：true，
get：function（）{...}，
set：undefined
} * /


根据 ECMAScript 5 ，当您尝试为某个属性指定某个值时，必须以严格模式抛出错误：

当分配发生在严格模式代码，
LeftHandSide 也可能不是对存取属性的引用，属性值{[[Set]]： undefined } [...]。在
中，会引发 TypeError 异常。

然而，DOM L2 Style被取代通过较新的CSS对象模型（CSSOM）。

根据该规范， style 接口的IDL属性 ElementCSSInlineStyle ，由 HTMLElement ，被定义为 [PutForwards] 扩展属性：

  [NoInterfaceObject] 
接口 ElementCSSInlineStyle  {
 [SameObject，PutForwards =  cssText ]只读属性 CSSStyleDeclaration  风格; 
>;  

这意味着设置样式财产必须像设置 cssText 其中一个 CSSStyleDeclaration 。因此，这些必须是等价的：

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


这就是为什么它可以在较新的浏览器上运行。

The following code fails in Chrome, Safari, works fine in Firefox

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

<p>background should be green</p>

Remove the "using strict" and it works.

Is that a bug in Chrome and Safari or a bug in Firefox? MDN says setting the style is valid.

解决方案

Problem

Not all browsers support assigning assigning a string which contains a textual representation of a CSS declaration block to the style property.

element.style = styleString; // Might not work

Workaround

As a workaround, you can set it as a content attribute, or to the cssText property:

element.setAttribute('style', styleString);

element.style.cssText = styleString;

Standard behavior

On older browsers compliant with DOM L2 Style and ES5, the assignment should

• Throw in strict mode
• Be ignored in non-strict mode.

On newer browsers compliant with CSSOM and ES5, the assignment should

• Always work

Full details

According to the DOM Level 2 Style spec, the style property is defined in the ElementCSSInlineStyle interface as follows:

interface ElementCSSInlineStyle {
  readonly attribute CSSStyleDeclaration  style;
};

Therefore, the style property should be implemented as an accessor property with a getter but without a setter.

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

According to ECMAScript 5, when you attempt to assign some value to a property like that, an error must be thrown in strict mode:

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.

However, DOM L2 Style is superseded by the newer CSS Object Model (CSSOM).

According to the that spec, the style IDL attribute of the interface ElementCSSInlineStyle, implemented by HTMLElement, is defined as a [PutForwards] extended attribute:

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

That means that setting the style property must behave like setting the cssText one of the CSSStyleDeclaration. Therefore, those must be equivalent:

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

And that's why it works on newer browsers.

这篇关于Uncaught TypeError：无法设置＃&lt; HTMLElement&gt;的属性样式只有一个吸气的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！