C# 操作html下的css样式

需求:需要给table添加样式，默认的table没有边框

AngleSharp

https://anglesharp.github.io/
在这里插入图片描述

给表格添加边框

没有添加样式的时候

<table><colgroup><col style="width: 54.17%;"><col style="width: 45.83%;"></colgroup><tbody><tr><td rowspan="2" style="height: 13.5pt; width: 175.5pt;">111</td><td style="width: 148.5pt;">222</td></tr><tr><td>444</td></tr></tbody>
</table>

在这里插入图片描述
添加样式border-collapse: collapse; border: 1px solid rgb(102, 102, 102);实现边框

代码如下

using AngleSharp;
using AngleSharp.Css.Dom;
using AngleSharp.Dom;
using AngleSharp.Html.Parser;
using System;
using System.Linq;namespace MailStu10
{internal class Program{static void Main(string[] args){var html = @"<table><colgroup><col style=""width: 54.17%;""><col style=""width: 45.83%;""></colgroup><tbody><tr><td rowspan=""2"" style=""height: 13.5pt; width: 175.5pt;"">111</td><td style=""width: 148.5pt;"">222</td></tr><tr><td>444</td></tr></tbody>
</table>";Console.WriteLine(html);var config = Configuration.Default.WithDefaultLoader().WithCss();IBrowsingContext context = BrowsingContext.New(config);var parser = new HtmlParser(new HtmlParserOptions(),context);var htmlDocument = parser.ParseDocument(html);var tables = htmlDocument.QuerySelectorAll("table");if (tables != null && tables.Any()){foreach (var table in tables){var tableStyle = table.GetStyle();if (tableStyle != null){tableStyle.SetBorderCollapse("collapse");tableStyle.SetBorderWidth("1px");tableStyle.SetBorderColor("#000");tableStyle.SetBorderStyle("solid");}else{//如果style不存在则直接将css样式植入table.SetStyle("border-collapse: collapse; border: 1px solid #000;");}var tdList = table.QuerySelectorAll("td");foreach (var td in tdList){var tdStyle = td.GetStyle();if (tdStyle != null){tdStyle.SetBorderCollapse("collapse");tdStyle.SetBorderWidth("1px");tdStyle.SetBorderColor("#000");tdStyle.SetBorderStyle("solid");}else{//如果style不存在则直接将css样式植入td.SetStyle("border-collapse: collapse; border: 1px solid #000;");}}}}if (htmlDocument.Body != null){Console.ForegroundColor = ConsoleColor.Blue;Console.WriteLine("结果");Console.WriteLine(htmlDocument.Body.InnerHtml);}Console.ReadKey();}}
}

在这里插入图片描述

去除图片的宽度限制

安装包版本

  <ItemGroup><PackageReference Include="AngleSharp" Version="1.3.0-beta.470" /><PackageReference Include="AngleSharp.Css" Version="1.0.0-beta.151" /></ItemGroup>

代码

using AngleSharp.Css.Parser;
using AngleSharp;
using AngleSharp.Html.Parser;
using AngleSharp.Css.Dom;namespace ConsoleApp2
{internal class Program{static void Main(string[] args){var htmlData = """<p><img class="image_resized" style="width:790px;" src="https://files.nsts.mvccms.cn/Upload/20210515/20210515152916_8509.jpg" alt=""><img class="image_resized" style="width:790px;" src="https://files.nsts.mvccms.cn/Upload/20210515/20210515153029_9192.jpg" alt=""><img class="image_resized" style="width:790px;" src="https://files.nsts.mvccms.cn/Upload/20210515/20210515153053_6518.jpg" alt=""><img class="image_resized" style="width:790px;" src="https://files.nsts.mvccms.cn/Upload/20210515/20210515153115_9184.jpg" alt=""><img class="image_resized" style="width:790px;" src="https://files.nsts.mvccms.cn/Upload/20210515/20210515153141_3887.jpg" alt=""><img class="image_resized" style="width:790px;" src="https://files.nsts.mvccms.cn/Upload/20210515/20210515153210_9167.jpg" alt=""></p>""";Console.WriteLine(htmlData);// 创建 HTML 解析器var config = Configuration.Default.WithDefaultLoader().WithCss();IBrowsingContext context = BrowsingContext.New(config);var htmlParser = new HtmlParser(new HtmlParserOptions(), context);var document = htmlParser.ParseDocument(htmlData);// 查找所有 img 元素var imgElements = document.QuerySelectorAll("img");// 创建 CSS 解析器var cssParser = new CssParser();foreach (var img in imgElements){var imgStyle = img.GetStyle();imgStyle.RemoveProperty("width");}Console.ForegroundColor = ConsoleColor.Green;Console.WriteLine("结果");Console.WriteLine(document.ToHtml());if (document.Body != null){Console.WriteLine();Console.WriteLine(document.Body.ToHtml());Console.WriteLine();Console.WriteLine(document.Body.InnerHtml);}}}
}