Question

我有一个网页，我想将鼠标悬停在所有锚标签上，并获取为该标签计算的样式。我编写的此函数似乎无效，因为它给了我锚点的原始样式，而不是悬停样式。请帮忙。

let data = await page.evaluate(() => {
    let elements = document.getElementsByTagName('a');
    properties = []
    for (var element of elements){
        element.focus();
        properties.push(JSON.parse(JSON.stringify(window.getComputedStyle(element, null)["backgroundColor"])));
    }
    return properties;
});

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle 尝试document.getComputedStyle（element，'：hover'）

Answer 2

首先，您应该convert results从document.getElementsByTagName到普通数组

const elements = [...document.getElementsByTagName('textarea')];

接下来要获取元素属性，请使用以下语法：

window.getComputedStyle(element).getPropertyValue("background-color")

最后，这是一个完整的示例：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://css-tricks.com/almanac/selectors/f/focus/');


  const data = await page.evaluate(() => {
    const elements = document.getElementsByTagName('textarea');

    return [...elements].map(element => {
      element.focus();
      return window.getComputedStyle(element).getPropertyValue("background-color");
    });
  });

  console.log(data);

  await browser.close();
})();

Answer 3

您可以使用page.$$()获得由textarea个元素组成的ElementHandle数组。

然后，您可以使用elementHandle.hover()将鼠标悬停在每个元素上，然后使用page.evaluate()获得计算出的背景色以推送到您的data数组中：

const elements = await page.$$( 'textarea' );
const data = [];

for ( let i = 0; i < elements.length; i++ )
{
    await elements[i].hover();

    data.push( await page.evaluate( element => window.getComputedStyle( element ).backgroundColor, elements[i] ) );
}

console.log( data );

遍历Node.js中的元素

3 个答案: