Changer la couleur de la bordure avec Aspose.HTML – Exemples en C#

Dans cet article, nous utiliserons des exemples C# pour montrer différentes façons de définir ou de modifier la couleur des bordures dans les fichiers HTML à l’aide de la bibliothèque Aspose.HTML for .NET.

Il est facile de définir ou de modifier la couleur de la bordure d’un élément HTML à l’aide de la propriété CSS border-color. Il existe plusieurs façons de définir la valeur de cette propriété. Vous pouvez utiliser des CSS en ligne, internes ou externes, et les valeurs de couleur HTML peuvent être spécifiées sous forme de noms de couleur standard ou de valeurs HEX, RGB, RGBA, HSL et HSLA.

Pour plus d’informations sur l’utilisation des codes de couleur HTML, veuillez consulter l’article Codes de couleur HTML. Dans la section Couleur de la bordure, vous trouverez des exemples de code HTML permettant de modifier la couleur de la bordure.

Modifier la couleur de la bordure à l’aide d’une feuille de style CSS en ligne

Vous pouvez définir ou modifier la couleur de la bordure en utilisant l’attribut style en ligne – CSS en ligne. La propriété border-color ne fonctionnera que si la propriété border-style est définie en premier, laquelle est utilisée pour définir les bordures. Cette propriété ne fonctionne pas seule. Si cette propriété n’est pas définie, elle hérite de la couleur de l’élément. La propriété border-color accepte les noms de couleurs, les valeurs RGB, RGBA, HEX, HSL ou HSLA. Pour modifier la couleur de la bordure d’un élément HTML à l’aide de l’API Aspose.HTML, vous devez suivre quelques étapes :

1. Charger un fichier HTML existant.
2. Créer une instance d’un document HTML.
3. Déterminez l’élément pour lequel vous souhaitez modifier la couleur de la bordure et recherchez cet élément pour lui attribuer un attribut de style. Utilisez la méthode GetElementsByTagName(name) de la classe Element qui renvoie les éléments HTML avec un nom de balise donné.
4. Définir l’attribut style avec les propriétés border-style et border-color : utiliser la propriété Style de la classe HTMLElement.
5. Enregistrer le document HTML modifié.

Vous pouvez définir ou modifier la couleur de la bordure pour divers éléments HTML tels que <p>, <h1>…<h6>, <div> ou <table>. L’exemple C# suivant montre la modification de la couleur de la bordure pour l’élément <h1> :

// Сhange border color for <h1> element using C#

// Prepare an output path for a document saving
string savePath = Path.Combine(OutputDir, "change-border-color.html");

// Prepare path to source HTML file
string documentPath = Path.Combine(DataDir, "file.html");

// Create an instance of an HTML document
HTMLDocument document = new HTMLDocument(documentPath);

// Find the h1 element to set a style attribute
HTMLElement header = (HTMLElement)document.GetElementsByTagName("h1").First();

// Set the style attribute properties
header.Style.Color = "#8B0000";
header.Style.BorderStyle = "solid";
header.Style.BorderColor = "rgb(220,30,100)";

// Save the HTML document to a file
document.Save(Path.Combine(savePath));

Il convient de noter que dans cet exemple, non seulement la couleur de la bordure de l’élément <h1> a été modifiée, mais aussi la couleur du texte de cet élément (la propriété color a été ajoutée).

Vous pouvez télécharger les exemples complets et les fichiers de données sur GitHub.

Changement de couleur pour les quatre côtés de la bordure

La propriété border-color définit la couleur des quatre bordures d’un élément. Si la propriété border-color n’a qu’une seule valeur, toute la bordure sera peinte avec cette couleur. Mais vous pouvez définir des valeurs de couleur différentes pour les bordures supérieure, droite, inférieure et gauche. Par exemple, si vous définissez la propriété border-color : red blue green gray, la bordure supérieure sera rouge, la bordure droite sera bleue, la bordure inférieure sera verte et la bordure gauche sera grise.

// Set different colors for all four borders of HTML element using C#

// Prepare an output path for a document saving
string savePath = Path.Combine(OutputDir, "change-four-border-color.html");

// Prepare path to source HTML file
string documentPath = Path.Combine(DataDir, "change-border-color.html");

// Create an instance of an HTML document
HTMLDocument document = new HTMLDocument(documentPath);

// Find the h1 element to set a style attribute
HTMLElement header = (HTMLElement)document.GetElementsByTagName("h1").First();

// Set the style attribute properties
header.Style.BorderStyle = "solid";
header.Style.BorderColor = "red blue green gray";

// Save the HTML document to a file
document.Save(Path.Combine(savePath));

La figure illustre les résultats de la modification de la couleur de la bordure de l’élément <h1> à l’aide de CSS en ligne : a) modification de la couleur de l’ensemble de la bordure ; b) modification de la couleur de chacun des quatre côtés de la bordure.

Modifier la couleur de la bordure à l’aide d’une feuille de style CSS interne

Le même résultat de colorisation des bordures peut être obtenu en utilisant le CSS interne, comme le montre l’exemple de code HTML suivant :

<head>
<style>
	h1 {
	border-color: rgb(220,30,100);
	}
</style>
</head>

Note: Gardez à l’esprit que l’utilisation d’un attribut style remplace tout style défini dans la balise HTML <style> ou dans une feuille de style externe.

L’exemple C# suivant montre comment réaliser un CSS interne pour modifier la couleur de la bordure. Faites quelques pas :

1. Charger un fichier HTML existant.
2. Créer une instance d’un document HTML.
3. Créez un élément <style> et attribuez les valeurs border-style et border-color à l’élément <h1>.
4. Trouvez l’élément <head> dans votre document et ajoutez-y l’élément <style>.
5. Enregistrer le document HTML modifié.

// Add internal CSS to style HTML in C#

// Prepare an output path for a document saving
string savePath = Path.Combine(OutputDir, "change-border-color-internal-css.html");

// Prepare path to source HTML file
string documentPath = Path.Combine(DataDir, "file.html");

// Create an instance of an HTML document
HTMLDocument document = new HTMLDocument(documentPath);

// Create a style element and assign the color border-style and border-color values for h1 element
Element style = document.CreateElement("style");
style.TextContent = "h1 {color:DarkRed; border-style:solid; border-color:rgb(220,30,100) }";

// Find the document head element and append style element to the head
Element head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Save the HTML document to a file
document.Save(Path.Combine(savePath));

L’exécution du code С# que nous avons donné ci-dessus se traduira par l’apparition de l’élément <style> dans le <head> du fichier de sortie, ce qui est illustré par le code HTML suivant :

<head>
<style>
	h1 { 
		color: darkred;
		border-top-style: solid;
		border-right-style: solid;
		border-bottom-style: solid;
		border-left-style: solid;
		border-top-color: rgb(220, 30, 100);
		border-right-color: rgb(220, 30, 100);
		border-bottom-color: rgb(220, 30, 100);
		border-left-color: rgb(220, 30, 100); }
</style>
</head>

Le résultat est similaire à celui de la figure (a) ci-dessus.

Modifier la couleur de la bordure du tableau

Si vous souhaitez modifier la couleur de la bordure du tableau, vous pouvez utiliser des feuilles de style CSS internes ou en ligne.

Vous pouvez appliquer l’attribut style à l’élément HTML <table>. Gardez à l’esprit que l’utilisation d’un attribut de style remplace tout style défini dans la balise HTML <style> ou dans une feuille de style externe. Pour modifier la couleur de la bordure du tableau à l’aide d’un attribut de style CSS en ligne, vous pouvez utiliser la méthode QuerySelector() pour naviguer dans le DOM et trouver l’élément <table>. Définissez ensuite l’attribut de style avec les propriétés requises pour l’élément <table> :

Exemple 1 de C# – Utilisation de CSS en ligne

// Change table border color using C#

// Prepare an output path for a document saving
string savePath = Path.Combine(OutputDir, "change-table-border-color-inline-css.html");

// Prepare path to source HTML file
string documentPath = Path.Combine(DataDir, "table.html");

// Create an instance of an HTML document
HTMLDocument document = new HTMLDocument(documentPath);

// Create a CSS Selector that selects the first table element
Element element = document.QuerySelector("table");

// Set style attribute with properties for the selected element
element.SetAttribute("style", "border: 2px #0000ff solid");

// Save the HTML document to a file
document.Save(Path.Combine(savePath));

JavaScript code 1

<script>
	// Create a CSS Selector that selects the first table element
    var element = document.querySelector("table");

    // Set style attribute with properties for the selected element
    element.setAttribute("style", "border: 2px #0000ff solid");
</script>

Le même résultat de colorisation des bordures de tableau peut être obtenu à l’aide de CSS internes, comme le montre l’exemple de code C# 2 ci-dessous :

Exemple 2 de C# – Utilisation de CSS internes

// Change HTML table border color using C#

// Prepare an output path for a document saving
string savePath = Path.Combine(OutputDir, "change-table-border-color-internal-css.html");

// Prepare path to source HTML file
string documentPath = Path.Combine(DataDir, "table.html");

// Create an instance of an HTML document
HTMLDocument document = new HTMLDocument(documentPath);

// Create a style element and assign the color border-style and border-color values for table element
Element style = document.CreateElement("style");
style.TextContent = "table { border-style:solid; border-color:rgb(0, 0, 255) }";

// Find the document head element and append style element to the head
Element head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Save the HTML document to a file
document.Save(Path.Combine(savePath));

JavaScript code 2

<script>
	// Create a style element and assign the border-style and border-color values for table element
	var style = document.createElement("style");
	style.textContent = "table { border-style:solid; border-color:rgb(0, 0, 255) }";

	// Find the document's <head> element and add a <style> element to it
	var head = document.getElementsByTagName("head")[0];
	head.appendChild(style);
</script>

La figure montre le tableau HTML table.html après avoir changé la couleur de la bordure de rouge à bleu :

Générateur de tableau HTML est une application en ligne qui permet de créer des tableaux avec des options personnalisables. Elle est gratuite et facile à utiliser. Il suffit de remplir toutes les options requises et d’obtenir un résultat !