如何获取网页元素的活动 CSS 和 HTML 属性？

Question

在给定元素的 URL 和 XPath 作为参数的情况下，我需要能够收集元素的活动 CSS 和 HTML 属性。例如，如果我在https://stackoverflow.com 上给出“”按钮的 XPath，我希望程序能够告诉我它是 100.11 x 37.78 像素，是指向 /questions/ask 的 html 链接，颜色为 rgba (102,191,255,0.75)等

有人开玩笑地告诉我，我可能需要制作一个全新的浏览器才能做到这一点；真的吗？有没有办法做到这一点？

是否有任何语言有库可以做到这一点？我知道 Python 的 Beautiful Soup，但我似乎只能得到 HTML 代码，没有 CSS。

Answer 1

好吧，既然 7 个月内 2 年没有人回答你的问题，那我还不如浪费我的时间，为以后的访客回答。

您的问题的答案很简单，但它需要多个部分。您可以使用 JavaScript 来执行此操作，并且您可以在提出这个问题之前轻松搜索您想要的内容。让我们从获取元素的高度和宽度开始（例如：How do I retrieve an HTML element's actual width and height?）。要获取元素的高度和宽度，element.getBoundingClientRect()。我在这里使用的代码是这样编写的，所以它很容易理解，但它可以被压缩得比原来多得多。

// get element foo from the page
var foo = document.getElementById("foo");
var fooRect = foo.getBoundingClientRect();
// print measurements
console.log("Width: " + fooRect.width);
console.log("Height: " + fooRect.height);

获取样式再次变得非常容易，您也可以轻松搜索此答案（例如：Get all css styles for a DOM element (a la Firebug)）。您可以使用 window.getComputedStyle(element) 来获取所有 CSS 样式，然后使用简单的数组方法来挑选您想要的样式。提到的方法将返回以像素为单位的样式

// get element bar from the page
var bar = document.getElementById("bar");
var barCSS = window.getComputedStyle(bar);
// print all CSS values
for(let i = 0; i < barCSS.length; i++){
    // from the linked answered question
    console.log(barCSS[i] + "=" + barCSS.getPropertyValue("" + barCSS[i]);
}