"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实现的接口ElementCSSInlineStyle
的style
IDL属性被定义为[PutForwards]
扩展属性:
[NoInterfaceObject] interface ElementCSSInlineStyle { [SameObject,PutForwards=07008] readonly attribute 07009 070010; };
这意味着设置样式属性必须像设置cssText
CSSStyleDeclaration一样.因此,那些必须是等价的:
element.style = styleString; element.style.cssText = styleString;
这就是为什么它适用于较新的浏览器.