getComputedStyle не обновляется при обновлении стиля для теста

Question

Я хочу создать макет div, у которого есть дисплей: нет для тестирования. Однако установка отображения в тесте и последующий вызов getComputedStyle не показывают изменений в стиле, то есть

const parent = document.createElement('div');
const middle = document.createElement('div');

// If you check in the dom, the middle div clearly has display: none as 
// part of its style
middle.style.display = 'none';
parent.appendChild(middle);

// Supposed to be 'none', but is actually ''
console.log(getComputedStyle(middle).display);

Похоже, другие люди говорили, что getComputedStyle вызывает перерисовку экрана, но кажется, что он не получает обновленное отображение среднего. Как заставить getComputedStyle обновиться до отображаемого значения?

Answer 1

getComputedStyle возвращает пустую строку для свойства display, если только узел не добавлен в DOM. Вы также можете видеть, что исходное вычисленное значение стиля является пустым, поскольку узел не был добавлен в DOM.

Как упоминалось в спецификации , на шаге 5 элемент должен бытьconnected:

Если elt подключен, часть плоского дерева и его теневой корень имеют контекст просмотра, который либо не имеет контейнера контекста просмотра, либо чей контейнер контекста просмотра используетсярендеринг, установите decls в список всех дополнительных свойств, которые поддерживаются свойствами CSS, в лексикографическом порядке, причем значение является разрешенным значением, вычисленным для obj с использованием правил стиля, связанных с doc.

const parent = document.createElement('div');
const middle = document.createElement('div');

console.log('Initial style: ', getComputedStyle(middle).display);
// If you check in the dom, the middle div clearly has display: none as 
// part of its style
middle.style.display = 'none';
parent.appendChild(middle);

// Adding this, now it shows the correct value
document.body.appendChild(parent);

// Supposed to be 'none', but is actually ''
console.log('Display: ', getComputedStyle(middle).display);

Answer 2

Вам необходимо добавить элемент parent в DOM, используя document.body.appendChild(parent). Если элемент отсутствует в DOM, у него нет вычисляемых стилей.

const parent = document.createElement('div');
const middle = document.createElement('div');

// If you check in the dom, the middle div clearly has display: none as 
// part of its style
middle.style.display = 'none';
parent.appendChild(middle);
document.body.appendChild(parent);

// Supposed to be 'none', but is actually ''
console.log(getComputedStyle(middle).display);