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

我需要能够在给定元素的URL和XPath作为参数的情况下收集元素的活动CSS和HTML属性。例如，如果我打开“提问”按钮的XPath，我希望程序能够告诉我它是100.11 x 37.78像素，是指向/questions/Ask的html链接，是彩色rgba（102191255,0.75），等等

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

---

任何语言都有这样的库吗？我知道python的靓汤，但我似乎只能得到HTML代码，没有CSS

好吧，既然2年7个月内没有人回答你的问题，我还是浪费时间为未来的访客回答吧

你的问题的答案很简单，但它需要多个部分。您可以使用JavaScript来实现这一点，并且可以在提问之前轻松搜索您想要的内容。让我们从获取元素的高度和宽度开始（例如：）。要获取元素的高度和宽度，请单击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);

获取样式再次变得非常简单，您也可以轻松地搜索这个答案（示例：）。您可以使用window.getComputedStyle（元素）获取所有CSS样式，然后使用简单的数组方法对所需内容进行挑剔。提到的方法将返回px形式的样式

// 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]);
}

//从页面获取元素栏
var bar=document.getElementById（“bar”）；
var barCSS=window.getComputedStyle（bar）；
//打印所有CSS值
for（设i=0；i