является вновь созданным элементом, который не является частью стиля DOM или имеет все значения по умолчанию?

Question

Сначала я создаю элемент:

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

И мой документ загружен, стили и сценарии действуют.

Стили могут быть например:

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 созданного элемента, что информация о стиле доступна немедленно (хотя все еще не через getComputedStyle()):

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

console.log('color: ' + a.style.color);

body.appendChild(a);

console.log('color: ' + a.style.color);

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/