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

【问题标题】：How to get css properties from a parsed html element using AngleSharp如何使用 AngleSharp 从解析的 html 元素中获取 css 属性
【发布时间】：2023-03-07 21:10:01
【问题描述】：

拥有这个 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");

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

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

【问题讨论】：

标签： anglesharp css-parsing

【解决方案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 是在外部样式表中定义的，请确保激活资源加载。

希望这会有所帮助！

【讨论】：

谢谢，经过小幅修复后，您的代码可以正常工作了。它只需要像这样在配置中添加文档加载支持：var config = Configuration.Default.WithDefaultLoader().WithCss(); 否则文档正文始终为空。
确实如此（我只关注 CSS 部分 - 所以我跳过了配置中的其他所有内容）。我修改了我的答案。感谢您的提醒！