คุณสมบัติ color ของ HTML DOM Style: สีข้อความ

คุณสมบัติ color ใน HTML DOM Style ใช้สำหรับกำหนดหรือดึงค่าสีของข้อความ (Text Color) รองรับทุกรูปแบบสี CSS

ไวยากรณ์ (Syntax)

object.style.color = "color|initial|inherit"

ค่าที่รองรับ

รูปแบบสีที่รองรับ

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
<h1>ตัวอย่างคุณสมบัติ color</h1>
<p>ย่อหน้าที่ 1</p>
<p>ย่อหน้าที่ 2</p>
<p>ย่อหน้าที่ 3</p>
<p>ย่อหน้าที่ 4</p>
<p>ย่อหน้าที่ 5</p>
<p>คลิกปุ่มเพื่อเปลี่ยนสีข้อความย่อหน้าข้างต้น</p>
<button type="button" onclick="ChangeColor()">เปลี่ยนสีข้อความ</button>
<script>
  function ChangeColor() {
    for(var i = 0; i < 5; i++) {
      if(i % 2 == 0)
        document.getElementsByTagName("P")[i].style.color = "blue";
      else
        document.getElementsByTagName("P")[i].style.color = "red";
    }
  }
</script>
</body>
</html>

ผลลัพธ์

ก่อน: ข้อความสีดำ (ค่าเริ่มต้น)
หลัง: ย่อหน้าคู่ = สีน้ำเงิน, ย่อหน้าคี่ = สีแดง

การใช้งานขั้นสูง

/* ใช้ currentColor สำหรับความสอดคล้อง */
.box {
  color: #333;
  border: 2px solid currentColor;      /* ขอบสีเดียวกับข้อความ */
  box-shadow: 0 0 10px currentColor;   /* เงาสีเดียวกับข้อความ */
}

/* CSS Custom Properties (Variables) */
:root {
  --primary-color: #db133a;
  --text-color: #333;
}
.element {
  color: var(--text-color);
}

/* Relative Color Syntax (CSS Color Level 5) */
.color-variant {
  color: rgb(from var(--base-color) r g b / 0.5); /* โปร่งใส 50% */
}

คุณสมบัติที่สืบทอด color (Inheritance)

• color เป็นคุณสมบัติที่ สืบทอด (inherited) โดยอัตโนมัติ
• ลูกจะได้สีจากพาเรนต์ ถ้าไม่ได้กำหนดเอง
• ใช้ initial เพื่อยกเลิกการสืบทอด

การเข้าถึง (Accessibility)

• ตรวจสอบ Contrast Ratio (WCAG AA: 4.5:1, AAA: 7:1)
• ใช้เครื่องมือ: WebAIM Contrast Checker, Chrome DevTools
• หลีกเลี่ยงสีเพียงอย่างเดียวในการสื่อความหมาย (ต้องมีไอคอน/ข้อความประกอบ)