Question

首先我创建元素：

var link = document.createElement('a');

我的文档已加载，样式和脚本生效。

样式migt例如：

a { background-color: salmon; }

因此它适用于所有A代码。

在这种情况下，这个新创建的元素是否将所有CSS属性设置为默认值，如插入到DOM中，或者在创建时设置样式。

Answer 1

不，直到元素附加到DOM它仍然没有样式。或者，至少，它的计算样式不可用（可能是因为它尚未呈现）：

HTML：

<a href="#">Something</a>

CSS：

a {
    color: purple;
}

JavaScript的：

var body = document.getElementsByTagName('body')[0];
var a = document.createElement('a');
a.href = 'http://google.com/';
a.innerHTML = 'link to google';

console.log('color: ' + window.getComputedStyle(a,null).getPropertyValue('color'));

body.appendChild(a);

console.log('color: ' + window.getComputedStyle(a,null).getPropertyValue('color'));

JS Fiddle

但是，如果您使用JavaScript显式设置了该元素的样式，这会添加到已创建元素的style属性，样式信息立即可用（尽管仍未通过{ {1}}）：

getComputedStyle()

JS Fiddle

Answer 2

插入文档后设置样式：

 getComputedStyle( document.createElement('a') ).color;
//""

 getComputedStyle( document.body.appendChild( document.createElement('a') ) ).color;
//"rgb(0, 119, 204)"

Answer 3

对于古玩，这里有关于浏览器渲染如何工作的更多信息：http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

是新创建的元素，它不是DOM样式的一部分，还是所有值都设置为默认值？

3 个答案: