Javascript 更新测试样式时未更新getComputedStyle

我想创建一个模拟div，它的display:none用于测试。但是，在测试中设置显示，然后调用getComputedStyle不会显示样式的更改，即

const parent=document.createElement（'div'）；
const middle=document.createElement（'div'）；
//如果签入dom，中间的div显然有display:noneas
//部分风格
middle.style.display='none'；
父、子（中）；
//应该是“无”，但实际上是“无”
log（getComputedStyle（中间）.display）

您需要使用

document.body.appendChild（parent）

将

父元素添加到DOM中。如果元素不在DOM中，则它没有任何计算样式


const parent=document.createElement（'div'）；
const middle=document.createElement（'div'）；
//如果签入dom，中间的div显然有display:noneas
//部分风格
middle.style.display='none'；
父、子（中）；
document.body.appendChild（父级）；
//应该是“无”，但实际上是“无”
log（getComputedStyle（中间）.display）
getComputedStyle
返回
显示
属性的空字符串，除非将节点添加到
DOM
。您可以看到，初始计算样式值也是空的，因为节点没有添加到DOM中

如上所述，在步骤5，必须连接元件：

如果elt已连接，则平面树的一部分及其包含根的阴影具有浏览上下文，该浏览上下文要么没有浏览上下文容器，要么正在呈现其浏览上下文容器，请按字典顺序将decls设置为所有支持CSS属性的手写属性列表，该值是使用与文档关联的样式规则为obj计算的解析值


const parent=document.createElement（'div'）；
const middle=document.createElement（'div'）；
log（'初始样式：'，getComputedStyle（中间）.display）；
//如果签入dom，中间的div显然有display:noneas
//部分风格
middle.style.display='none'；
父、子（中）；
//加上这个，现在它显示了正确的值
document.body.appendChild（父级）；
//应该是“无”，但实际上是“无”
log（'Display:'，getComputedStyle（中间）.Display）
您需要在文档中实际插入节点，以便根据规范返回
getComputedStyle
以返回
none
，但我仍然发现
getComputedStyle
返回值为空字符串的所有CSS属性列表有点令人困惑。一个可能的答案是，默认情况下，
getComputedStyle
创建与
HtmleElement
的默认
style
对象相同的CSD声明空列表，然后它实际使用元素的实际样式覆盖这些空字符串。