Analyzing your prompt, please hold on...
An error occurred while retrieving the results. Please refresh the page and try again.
使用 Aspose.HTML 更改边框颜色 – C# 示例
Contents
[
Hide
Show
]在本文中，我们将使用 C# 示例来展示使用 Aspose.HTML for .NET 库在 HTML 文件中设置或更改边框颜色的不同方法。
使用 CSS border-color 属性可以轻松设置或更改 HTML 元素的边框颜色。有几种方法可以设置该属性值。您可以使用内联、内部或外部 CSS，HTML 颜色值可以指定为标准颜色名称或 HEX、RGB、RGBA、HSL 和 HSLA 值。
使用内联 CSS 更改边框颜色
您可以使用内联 style 属性(内联 CSS)设置或更改边框颜色。只有首先定义了用于设置边框的 border-style 属性，border-color属性才会起作用。该属性不会单独起作用。如果未设置该属性，则会继承元素的颜色。边框颜色 属性可接受颜色名称、RGB、RGBA、HEX、HSL 或 HSLA 值。
要使用 Aspose.HTML API 更改 HTML 元素的边框颜色，应遵循以下几个步骤：
- 加载现有的 HTML 文件。
- 创建 HTML 文档实例
- 确定要为哪个元素更改边框颜色，然后找到该元素并为其设置样式属性。使用
Element 类中的
GetElementsByTagName(
name) 方法，该方法可返回具有给定标记名的 HTML 元素。 - 使用
border-style和border-color属性设置style属性：使用 HTMLElement 类的 Style 属性。 - 保存修改后的 HTML 文档。
您可以设置或更改各种 HTML 元素的边框颜色，如 <p>、<h1>…<h6>、<div> 或 <table>。下面的 C# 示例显示了 <h1>元素边框颜色的更改：
1// Сhange border color for <h1> element using C#
2
3// Prepare an output path for a document saving
4string savePath = Path.Combine(OutputDir, "change-border-color.html");
5
6// Prepare path to source HTML file
7string documentPath = Path.Combine(DataDir, "file.html");
8
9// Create an instance of an HTML document
10HTMLDocument document = new HTMLDocument(documentPath);
11
12// Find the h1 element to set a style attribute
13HTMLElement header = (HTMLElement)document.GetElementsByTagName("h1").First();
14
15// Set the style attribute properties
16header.Style.Color = "#8B0000";
17header.Style.BorderStyle = "solid";
18header.Style.BorderColor = "rgb(220,30,100)";
19
20// Save the HTML document to a file
21document.Save(Path.Combine(savePath));值得注意的是，在这个 С# 示例中，不仅更改了 <h1> 元素的边框颜色，还更改了该元素的文本颜色(添加了 color 属性)。
您可以从 GitHub 下载完整的示例和数据文件。
更改边框四边的颜色
边框颜色 属性用于设置元素四个边框的颜色。如果 border-color 属性只有一个值，那么整个边框都将使用这种颜色。但你可以为顶部、右侧、底部和左侧边框设置不同的颜色值。例如，如果设置border-color: red blue green gray，则顶部边框为红色，右侧边框为蓝色，底部边框为绿色，左侧边框为灰色。
1// Set different colors for all four borders of HTML element using C#
2
3// Prepare an output path for a document saving
4string savePath = Path.Combine(OutputDir, "change-four-border-color.html");
5
6// Prepare path to source HTML file
7string documentPath = Path.Combine(DataDir, "change-border-color.html");
8
9// Create an instance of an HTML document
10HTMLDocument document = new HTMLDocument(documentPath);
11
12// Find the h1 element to set a style attribute
13HTMLElement header = (HTMLElement)document.GetElementsByTagName("h1").First();
14
15// Set the style attribute properties
16header.Style.BorderStyle = "solid";
17header.Style.BorderColor = "red blue green gray";
18
19// Save the HTML document to a file
20document.Save(Path.Combine(savePath));图中展示了使用内联 CSS 更改<h1>元素边框颜色的结果：a) 更改了整个边框的颜色；b) 更改了边框四边中每一边的颜色。
使用内部 CSS 更改边框颜色
如以下 HTML 代码示例所示，使用内部 CSS 也能实现相同的边框着色效果：
1<head>
2<style>
3 h1 {
4 border-style: solid;
5 border-color: rgb(220,30,100);
6 }
7</style>
8</head>注意： 请记住，使用 style 属性会覆盖 HTML <style> 标记或外部样式表中设置的任何样式。
下一个 C# 示例演示了如何使用内部 CSS 更改边框颜色。请执行以下步骤
- 加载现有的 HTML 文件。
- 创建 HTML 文档实例
- 创建
<style>元素，并为<h1>元素分配border-style和border-color值。 - 在文档中找到
<head>元素，并在其中添加<style>元素。 - 保存修改后的 HTML 文档。
1// Add internal CSS to style HTML in C#
2
3// Prepare an output path for a document saving
4string savePath = Path.Combine(OutputDir, "change-border-color-internal-css.html");
5
6// Prepare path to source HTML file
7string documentPath = Path.Combine(DataDir, "file.html");
8
9// Create an instance of an HTML document
10HTMLDocument document = new HTMLDocument(documentPath);
11
12// Create a style element and assign the color border-style and border-color values for h1 element
13Element style = document.CreateElement("style");
14style.TextContent = "h1 {color:DarkRed; border-style:solid; border-color:rgb(220,30,100) }";
15
16// Find the document head element and append style element to the head
17Element head = document.GetElementsByTagName("head").First();
18head.AppendChild(style);
19
20// Save the HTML document to a file
21document.Save(Path.Combine(savePath));执行上述 С# 代码后，<style>元素将出现在输出文件的<head>中，下面的 HTML 代码对此进行了说明：
1<head>
2<style>
3 h1 {
4 color: darkred;
5 border-top-style: solid;
6 border-right-style: solid;
7 border-bottom-style: solid;
8 border-left-style: solid;
9 border-top-color: rgb(220, 30, 100);
10 border-right-color: rgb(220, 30, 100);
11 border-bottom-color: rgb(220, 30, 100);
12 border-left-color: rgb(220, 30, 100); }
13</style>
14</head>结果与上图 (a) 所示相似。
更改表格边框颜色
如果要更改表格边框颜色，可以使用内联或内部 CSS。
您可以通过 HTML <table>元素应用style属性。请记住，使用样式属性会覆盖 HTML <style>标记或外部样式表中设置的任何样式。要使用内联 CSS 样式属性更改表格边框颜色，可以使用
QuerySelector() 方法浏览 DOM 并找到 <table> 元素。然后为 <table> 元素设置具有所需属性的样式属性：
C# 示例 1 – 使用内联 CSS
1// Change table border color using C#
2
3// Prepare an output path for a document saving
4string savePath = Path.Combine(OutputDir, "change-table-border-color-inline-css.html");
5
6// Prepare path to source HTML file
7string documentPath = Path.Combine(DataDir, "table.html");
8
9// Create an instance of an HTML document
10HTMLDocument document = new HTMLDocument(documentPath);
11
12// Create a CSS Selector that selects the first table element
13Element element = document.QuerySelector("table");
14
15// Set style attribute with properties for the selected element
16element.SetAttribute("style", "border: 2px #0000ff solid");
17
18// Save the HTML document to a file
19document.Save(Path.Combine(savePath));JavaScript 代码 1
1<script>
2 // Create a CSS Selector that selects the first table element
3 var element = document.querySelector("table");
4
5 // Set style attribute with properties for the selected element
6 element.setAttribute("style", "border: 2px #0000ff solid");
7</script>如下面的 C# 代码示例 2 所示，使用内部 CSS 也可以实现同样的表格边框着色效果：
C# 示例 2 – 使用内部 CSS
1// Change HTML table border color using C#
2
3// Prepare an output path for a document saving
4string savePath = Path.Combine(OutputDir, "change-table-border-color-internal-css.html");
5
6// Prepare path to source HTML file
7string documentPath = Path.Combine(DataDir, "table.html");
8
9// Create an instance of an HTML document
10HTMLDocument document = new HTMLDocument(documentPath);
11
12// Create a style element and assign the color border-style and border-color values for table element
13Element style = document.CreateElement("style");
14style.TextContent = "table { border-style:solid; border-color:rgb(0, 0, 255) }";
15
16// Find the document head element and append style element to the head
17Element head = document.GetElementsByTagName("head").First();
18head.AppendChild(style);
19
20// Save the HTML document to a file
21document.Save(Path.Combine(savePath));JavaScript 代码 2
1<script>
2 // Create a style element and assign the border-style and border-color values for table element
3 var style = document.createElement("style");
4 style.textContent = "table { border-style:solid; border-color:rgb(0, 0, 255) }";
5
6 // Find the document's <head> element and add a <style> element to it
7 var head = document.getElementsByTagName("head")[0];
8 head.appendChild(style);
9</script>图中显示了将边框颜色从红色改为蓝色后的 HTML 表格 table.html：
HTML 表格生成器 是一款在线应用程序，用于创建具有自定义选项的表格。它免费且易于使用。只需填写所有所需选项，即可得到结果！
