Uncaught TypeError：无法设置＃< HTMLElement>的属性样式只有一个吸气

问题描述

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

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

标准行为

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

• 以严格模式投放


• 在非严格模式下被忽略

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

• 始终有效
  

全部详细信息

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

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

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

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

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

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

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

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

这意味着设置样式财产必须像设置其中一个 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:

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：无法设置＃< HTMLElement>的属性样式只有一个吸气的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！