javascript - 更新测试样式时未更新 getComputedStyle

Question

我想创建一个具有 display: none 的模拟 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。

如前所述in the spec ，在第 5 步，必须连接元素:

If elt is connected, part of the flat tree, and its shadow-including root has a browsing context which either doesn’t have a browsing context container, or whose browsing context container is being rendered, set decls to a list of all longhand properties that are supported CSS properties, in lexicographical order, with the value being the resolved value computed for obj using the style rules associated with 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);