如何使用 AngleSharp 从解析的 html 元素中获取 css 属性

Question

有了这个CSS：

.foo { background-size: 10px 20px; }

还有这个 HTML：

<span class="foo"></span>

还有这个 C#：

var parser = new HtmlParser();
var doc = parser.Parse("http://localhost/test.html");
var element = doc.QuerySelector("span.foo");

如何获取与element相关的背景宽度和高度？

（目前我使用的是AngleSharp版本0.9.9）

Answer 1

首先，C#代码是错误的。您传递的字符串parser.Parse是 HTML 代码，而不是 URI。此外，您的代码不执行任何 CSS 解析 - 它仅使用 HTML 解析器。因此，让我们使用浏览上下文来获取您需要的一切。

var config = Configuration.Default.WithDefaultLoader().WithCss();
var context = BrowsingContext.New(config);
var document = context.OpenAsync("http://localhost/test.html").Result;
var element = document.QuerySelector("span.foo");
var style = document.DefaultView.GetComputedStyle(element);
var size = style.BackgroundSize;

请记住，element如果不存在此类元素（没有与查询匹配的元素），则该元素可能为 null，并且该GetComputedStyle方法仅以有限的方式工作。另外，如果您的 CSS 是在外部样式表中定义的，请确保激活资源加载。

希望这可以帮助！