PhantomJS-获取元素计算样式

Question

我正在尝试获取页面上所有p元素的文本颜色和背景颜色：

elements = document.querySelectorAll("p");
console.log("elements " + elements.length);
console.log(window.getComputedStyle(elements[0]));
console.log(window.getComputedStyle(elements[0]).length);
console.log(window.getComputedStyle(elements[0]).getPropertyValue("background-color"));
console.log(window.getComputedStyle(elements[0]).getPropertyValue("color"));
console.log(elements[0].innerHTML);

打印：

background-color: rgba(0, 0, 0, 0)
color: rgb(225, 224, 220)

但是如果我继续使用chrome并检查第一个p元素的计算样式，它将显示：

background-color: #43413e (67, 65, 62 as rgb)
color: #e1e0dc (225, 224, 220 as rgb)

可以让我获得“计算”风格，为什么不这么做呢？ 我在这里想念什么？ 它应该打印brackground-color: rgb(67, 65, 62)

Answer 1

我不确定您在哪里运行此代码，但是我希望可以通过编程方式更改样式。 问题很可能是发生更改后，您正在chrome中手动检查该值，但是phantomJS太早检查了该值。 也许将您的控制台登录到函数中，然后延迟执行该函数（例如，通过使用setTimeout ）将解决此问题。