javascript – 未捕获TypeError:无法设置只有getter的#的属性样式

前端之家收集整理的这篇文章主要介绍了javascript – 未捕获TypeError:无法设置只有getter的#的属性样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
以下代码在Chrome中失败,Safari在Firefox中运行良好
"use strict";
document.body.style = "background-color: green;";
<p>background should be green</p>

删除“使用严格”,它的工作原理.

这是Chrome和Safari中的错误还是Firefox中的错误MDN says setting the style is valid.

解决方法

问题

并非所有浏览器都支持将包含CSS声明块的文本表示的字符串分配给style属性.

element.style = styleString; // Might not work

解决方法

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

element.setAttribute('style',styleString);
element.style.cssText = styleString;

标准行为

在符合DOM L2 Style和ES5的旧浏览器上,分配应该

>投入严格模式
>在非严格模式下被忽略.

在符合CSSOM和ES5的较新浏览器上,分配应该

>始终工作

全部细节

根据DOM Level 2 Style规范,style属性在ElementCSSInlineStyle接口中定义如下:

interface ElementCSSInlineStyle {
  readonly attribute CSSStyleDeclaration  style;
};

因此,style属性应该实现为带有getter但没有setter的accessor property.

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

根据ECMAScript 5,当您尝试为某个属性分配一些值时,必须在严格模式下抛出错误

When an assignment occurs within 07004,[…] 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.

但是,DOM L2 Style被新的CSS对象模型(CSSOM)取代.

根据该规范,由HTMLElement实现的接口ElementCSSInlineStylestyle IDL属性被定义为[PutForwards]扩展属性

[NoInterfaceObject]
interface ElementCSSInlineStyle {
  [SameObject,PutForwards=07008] readonly attribute 07009 070010;
};

这意味着设置样式属性必须像设置cssText CSSStyleDeclaration一样.因此,那些必须是等价的:

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

这就是为什么它适用于较新的浏览器.

原文链接:https://www.f2er.com/js/150750.html

猜你在找的JavaScript相关文章