การสลับสับเปลี่ยนสไตล์ผ่าน data- แอตทริบิวต์ใน JavaScript

เพื่อแก้ปัญหาที่อธิบายในบทเรียนก่อนหน้า เราจะไม่กำหนดคลาสให้กับองค์ประกอบ แต่จะ เปลี่ยนค่าของแอตทริบิวต์ data- วิธีนี้สะดวกเพราะแอตทริบิวต์ดังกล่าว สามารถมีค่าได้เพียงค่าเดียว และเมื่อเขียนค่าใหม่ ค่าใหม่ จะลบค่าเก่าทิ้งไปเอง

ตัวอย่างเช่น นี่คือวิธีที่เรากำหนด สไตล์สำหรับสถานะสำเร็จ:

html<div id="elem" data-type="success">
  ข้อความ
</div>

และนี่คือสไตล์สำหรับข้อผิดพลาด:

html<div id="elem" data-type="error">
  ข้อความ
</div>

เราจะกำหนดสไตล์ของสถานะต่าง ๆ ผ่าน ตัวเลือกแอตทริบิวต์:

css[data-type="success"] {
  color: green;
}
[data-type="warning"] {
  color: orange;
}
[data-type="error"] {
  color: red;
}

ตอนนี้เราสามารถเปลี่ยนสีของ องค์ประกอบของเราเป็นสีสำเร็จได้อย่างง่ายดาย:

javascriptelem.dataset.type = 'success';

และนี่คือวิธีเปลี่ยนเป็นสีข้อผิดพลาด:

javascriptelem.dataset.type = 'error';