Question

考虑以下代码

"use strict";
var el = document.createElement('div');
el.className = 'bluebox';
el.style = 'background:blue; width:100px; height: 100px';
document.getElementsByTagName('body')[0].appendChild(el)

Firefox和Chrome会创建一个元素

<div class="yolo" style="background: blue none repeat scroll 0% 0%; width: 100px; height: 100px;">

但Edge引发了一个错误：

Assignment to read-only properties is not allowed in strict mode

这里发生了什么？样式属性实际上是只读的，FF和Chrome的行为是不正确的，还是Edge有另一个严格模式的概念或......？如果不问这里我怎么能找到这个？

Answer 1

这里发生了什么？

没多大..你试图错误地分配一个属性集合。

样式属性实际上是只读的，FF和Chrome的行为是否正确，或者是否有Edge另一种严格模式的概念或......？

不，如果您将其设置为属性（setAttribute（＆＃39; style＆＃39;，＆＃39;＆＃39;）），那么一切都会奏效。然而，财产是一个对象 - 一个集合和行为不同。所以Edge这次实际上是正确的。

如果不问这里，我怎么能找到这个？

你可以阅读和谷歌：

https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

Exmaples：

elt.style.cssText = "color: blue"; // Multiple style properties

elt.setAttribute("style", "color: blue"); // Multiple style properties

elt.style.color = "blue";  // Directly

var st = elt.style;
st.color = "blue";  // Indirectly

JS严格模式：为什么（仅！）Edge在分配样式属性时会抱怨

1 个答案: