MutationObserver中window.getComputedStyle()返回none问题求助

为什么会出现这种情况？ #

1. 监听对象错误：你代码里用的mutation.target是触发子节点变化的父元素（比如document.body），不是你要获取样式的新增子元素。所以你打印的其实是父元素的filter，自然返回none。
2. 样式计算时机过早：节点刚被添加到DOM时，浏览器还没来得及完成样式计算和重排，此时调用getComputedStyle只能拿到默认初始值。setTimeout没用是因为它的执行时机无法保证刚好在样式计算完成之后。

修复后的代码 #

const observer = new MutationObserver((mutationList, observer) => {
    for (const mutation of mutationList) {
        // 遍历本次新增的所有节点
        for (const node of mutation.addedNodes) {
            // 只处理元素节点（跳过文本、注释这类无样式的节点）
            if (node.nodeType === Node.ELEMENT_NODE) {
                // 用requestAnimationFrame等待浏览器完成样式计算
                requestAnimationFrame(() => {
                    const style = window.getComputedStyle(node);
                    console.log(style.filter);
                });
            }
        }
    }
});

observer.observe(document.body, { childList: true, subtree: true });

关键注意点 #

• 操作mutation.addedNodes：这才是每次DOM变化中新增的节点集合，而非mutation.target。
• 筛选元素节点：addedNodes可能包含文本、注释节点，这类节点没有样式属性，必须先过滤。
• 用requestAnimationFrame替代setTimeout：它会在浏览器下一次重绘前执行，此时浏览器已经完成当前DOM节点的样式计算，能确保拿到正确的计算后样式。

内容的提问来源于stack exchange，提问作者inpotk