html - 如何获取网页元素上的事件 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 但我似乎只能得到没有 CSS 的 HTML 代码。

Answer 1

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

您的问题的答案很简单，但它需要多个部分。您可以使用 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]);
}