เปลี่ยนสีเส้นขอบ HTML ใน C# | เปลี่ยน CSS สีเส้นขอบ

ในบล็อกโพสต์นี้ เราจะได้เรียนรู้วิธีเปลี่ยนสีเส้นขอบ HTML ใน C# คู่มือนี้จะให้ความรู้และทักษะที่จำเป็นในการเปลี่ยนสีเส้นขอบ, สีเส้นขอบ CSS, สีเส้นขอบตาราง HTML ฯลฯ ในไฟล์ HTML โดยทางโปรแกรมโดยใช้ C#

บทความนี้ครอบคลุมหัวข้อต่อไปนี้:

  1. C# API เพื่อเปลี่ยนสีเส้นขอบในไฟล์ HTML
  2. เปลี่ยนสีเส้นขอบ HTML
  3. CSS สีเส้นขอบโดยใช้ CSS ภายใน
  4. เปลี่ยนสีเส้นขอบตาราง HTML
  5. แหล่งเรียนรู้ฟรี

C# API เพื่อเปลี่ยนสีเส้นขอบในไฟล์ HTML

เราจะใช้ Aspose.HTML for .NET เพื่อเปลี่ยนสีเส้นขอบในไฟล์ HTML เป็นไลบรารีคลาสข้ามแพลตฟอร์มที่ทรงพลังและอเนกประสงค์ซึ่งช่วยให้นักพัฒนาสามารถจัดการและจัดการเอกสาร HTML ภายในแอปพลิเคชัน .NET ของตนได้ ช่วยให้คุณสามารถสร้าง แก้ไข และแปลงไฟล์ HTML ได้ Aspose.HTML for .NET ช่วยให้คุณสามารถวิเคราะห์และแยกเนื้อหาจากไฟล์ HTML ได้ รองรับไม่เพียงแต่ HTML5 แต่ยังรองรับข้อกำหนด CSS3 และ HTML Canvas ด้วย ทำให้คุณสามารถจัดสไตล์เอกสาร HTML ของคุณและโต้ตอบกับองค์ประกอบแบบไดนามิก

โปรด ดาวน์โหลด DLL ของ API หรือติดตั้งโดยใช้ NuGet

PM> Install-Package Aspose.Html

เปลี่ยนสีเส้นขอบ HTML ใน C#

คุณสมบัติ border-color กำหนดสีของเส้นขอบทั้งสี่ขององค์ประกอบ เมื่อกำหนดค่าเดียวให้กับคุณสมบัติ border-color เส้นขอบทั้งหมดจะถูกทาสีด้วยสีนั้น ตัวอย่างเช่น หากเราตั้งค่าคุณสมบัติ “สีเส้นขอบ” ให้เป็นสี “สีแดง” สีเส้นขอบทั้งสี่สีจะเป็น “สีแดง” อีกทางหนึ่ง เรามีความยืดหยุ่นในการระบุค่าสีที่แตกต่างกันสำหรับเส้นขอบด้านบน ขวา ล่าง และซ้าย

เราสามารถเปลี่ยนสีเส้นขอบขององค์ประกอบ HTML ใด ๆ ได้โดยทำตามขั้นตอนด้านล่าง:

  1. โหลดไฟล์ HTML ที่มีอยู่โดยใช้คลาส HTMLDocument
  2. รับ HTMLElement เฉพาะเพื่อเปลี่ยนสีเส้นขอบ
  3. ตั้งค่าแอตทริบิวต์สไตล์เส้นขอบ เช่น BorderStyle, BorderColor
  4. สุดท้าย ให้บันทึกเอกสาร HTML ลงในไฟล์

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีการเปลี่ยนสีเส้นขอบใน HTML โดยใช้ C#

// เตรียมเส้นทางไปยังไฟล์ HTML ต้นฉบับ
string documentPath = "C:\\Files\\input.html";

// เตรียมเส้นทางเอาต์พุตสำหรับการบันทึกเอกสาร
string savePath = "C:\\Files\\output.html";

// สร้างอินสแตนซ์ของเอกสาร HTML
var document = new HTMLDocument(documentPath);

// ค้นหาองค์ประกอบ h1 เพื่อตั้งค่าแอตทริบิวต์สไตล์
var header = (HTMLElement)document.GetElementsByTagName("h1").First();

// ตั้งค่าคุณสมบัติแอตทริบิวต์สไตล์
header.Style.BorderStyle = "solid";
header.Style.BorderColor = "red blue green gray";

// ค้นหาองค์ประกอบ h2 เพื่อตั้งค่าแอตทริบิวต์สไตล์
var subheading = (HTMLElement)document.GetElementsByTagName("h2").First();

// ตั้งค่าคุณสมบัติแอตทริบิวต์สไตล์
subheading.Style.BorderStyle = "solid";
subheading.Style.BorderColor = "black";

// บันทึกเอกสาร HTML ลงในไฟล์
document.Save(Path.Combine(savePath));
เปลี่ยนสีเส้นขอบ HTML ใน C#

เปลี่ยนสีเส้นขอบ HTML ใน C#

เปลี่ยน CSS สีเส้นขอบโดยใช้ CSS ภายในใน C#

เราสามารถเปลี่ยนสีเส้นขอบได้โดยการเพิ่ม CSS ภายในโดยใช้ <style> element in an HTML document by following the steps below:

  1. โหลดไฟล์ HTML ที่มีอยู่โดยใช้คลาส HTMLDocument
  2. สร้าง <style> element using the CreateElement() method.
  3. ระบุเนื้อหาข้อความสำหรับ <style> element.
  4. รับ HTMLElement เฉพาะเพื่อเปลี่ยนสีเส้นขอบ
  5. หลังจากนั้นให้ผนวกองค์ประกอบสไตล์โดยใช้เมธอด AppendChild()
  6. สุดท้าย ให้บันทึกเอกสาร HTML ลงในไฟล์

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีการเปลี่ยนสีเส้นขอบโดยใช้ CSS ภายในใน C#

// เตรียมเส้นทางไปยังไฟล์ HTML ต้นฉบับ
string documentPath = "C:\\Files\\input.html";

// เตรียมเส้นทางเอาต์พุตสำหรับการบันทึกเอกสาร
string savePath = "C:\\Files\\output_css.html";

// สร้างอินสแตนซ์ของเอกสาร HTML
var document = new HTMLDocument(documentPath);

// สร้างองค์ประกอบสไตล์และกำหนดค่าสีสไตล์เส้นขอบและสีเส้นขอบสำหรับองค์ประกอบ h1
var style = document.CreateElement("style");
style.TextContent = "h1 { color:Blue; border-style:solid; border-color:rgb(220,30,100) }";

// ค้นหาองค์ประกอบส่วนหัวของเอกสารและผนวกองค์ประกอบสไตล์เข้ากับส่วนหัว
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// บันทึกเอกสาร HTML ลงในไฟล์
document.Save(Path.Combine(savePath));

ตัวอย่างโค้ดข้างต้นจะต่อท้าย <style> element in the <head> section of the output HTML document.

<style>
h1 { 
	color: blue; 
	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>

เปลี่ยนสีเส้นขอบตาราง HTML ใน C#

เราสามารถเปลี่ยนสีเส้นขอบของตาราง HTML ได้อย่างง่ายดายโดยใช้ CSS ภายในหรืออินไลน์ เราสามารถใช้ <style> element to the HTML <table> element.

โปรดทำตามขั้นตอนด้านล่างเพื่อเปลี่ยนสีเส้นขอบของตาราง HTML

  1. โหลดไฟล์ HTML ที่มีอยู่โดยใช้คลาส HTMLDocument
  2. เลือกตารางโดยใช้เมธอด QuerySelector()
  3. ตั้งค่าแอตทริบิวต์ style โดยใช้เมธอด SetAttribute()
  4. สุดท้าย ให้บันทึกเอกสาร HTML ลงในไฟล์

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีการเปลี่ยนสีเส้นขอบของตาราง HTML ใน C#

// เตรียมเส้นทางไปยังไฟล์ HTML ต้นฉบับ
string documentPath = "C:\\Files\\html_table.html";

// เตรียมเส้นทางเอาต์พุตสำหรับการบันทึกเอกสาร
string savePath = "C:\\Files\\output_table.html";

// สร้างอินสแตนซ์ของเอกสาร HTML
var document = new HTMLDocument(documentPath);

// สร้างตัวเลือก CSS ที่เลือกองค์ประกอบตารางแรก
var element = document.QuerySelector("table");

// ตั้งค่าแอตทริบิวต์ลักษณะที่มีคุณสมบัติสำหรับองค์ประกอบที่เลือก               
element.SetAttribute("style", "border: 2px #0000ff solid");

// บันทึกเอกสาร HTML ลงในไฟล์
document.Save(savePath);
เปลี่ยนสีเส้นขอบตาราง HTML ใน C#

เปลี่ยนสีเส้นขอบตาราง HTML ใน C#

รับใบอนุญาตฟรี

คุณสามารถ รับใบอนุญาตชั่วคราวฟรี เพื่อทดลองใช้ Aspose.HTML for .NET โดยไม่มีข้อจำกัดในการประเมิน

สร้างตาราง HTML – ทรัพยากรการเรียนรู้

นอกจากการเปลี่ยนสีเส้นขอบแล้ว คุณยังสามารถเรียนรู้เพิ่มเติมเกี่ยวกับไลบรารีและสำรวจคุณสมบัติอื่นๆ มากมายโดยใช้แหล่งข้อมูลด้านล่าง:

บทสรุป

ในบล็อกโพสต์นี้ เราได้เรียนรู้วิธีเปลี่ยนสีเส้นขอบในเอกสาร HTML โดยใช้ C# เราได้สำรวจวิธีการต่างๆ ในการเปลี่ยนสีเส้นขอบขององค์ประกอบ HTML ต่างๆ ด้วยการทำตามขั้นตอนและตัวอย่างโค้ดที่ให้ไว้ในบทความนี้ คุณสามารถพัฒนาโซลูชันที่คุณกำหนดเองสำหรับการทำงานกับเอกสาร HTML ได้อย่างง่ายดาย ในกรณีที่มีความคลุมเครือ โปรดติดต่อเราที่ ฟอรัมการสนับสนุนฟรี

ดูสิ่งนี้ด้วย