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 个月内没有人回答过您的问题，我不妨浪费时间为未来的访客回答。

你的问题的答案很简单，但它需要多个部分。您可以使用 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 样式，然后使用简单的数组方法挑剔您想要的样式。提到的方法将返回以 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]);
}

如何在网页上的元素上获取有效的CSS和HTML属性？

1 个答案: