Question

我正在尝试评估CSS中新文档上元素的顶级参数更改。正如您在示例代码中看到的那样，“ top”已更改，但in元素在浏览器中没有移动，当我检查这些元素时，它们仍为top：0;当我追加此元素的副本时，此方法有效，但此解决方案无法令我满意。

page.evaluateOnNewDocument( () => {
     const elements = document.getElementsByTagName('*');
            for (let i = 0; i < elements.length; i++) {
                    el.style.top = '50px';
                    console.log(el.className, window.getComputedStyle(el).getPropertyValue('top')); // prints 50px;

            };
});

Answer 1

for循环后还有一个额外的};，并且您正在尝试访问不存在的for循环中的未定义变量el。

变量el可能应该是elements，并且您应该通过其索引访问它们。

您的代码应如下所示：

page.evaluateOnNewDocument( () =>
{
    const elements = document.getElementsByTagName( '*' );

    for ( let i = 0; i < elements.length; i++ )
    {
        elements[i].style.top = '50px';
        console.log( elements[i].className, window.getComputedStyle( elements[i] ).getPropertyValue( 'top' ) );
    }
});

Answer 2

问题在于该网站上的某些元素是稍后动态呈现的，因此page.onNewDocument中的上下文尚未为此做好准备。解决方案是将这段代码移到page.evaluate DOM的完全加载位置。

在valuateOnNewDocument中更改元素的样式

2 个答案: