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

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

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

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

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

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

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

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

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

elem.dataset.type = 'success';

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

elem.dataset.type = 'error';

กำหนดอินพุต เมื่อเสียโฟกัสให้ตรวจสอบ ตัวเลขที่ป้อนเข้าไป หากตัวเลขนี้ น้อยกว่าหรือเท่ากับสิบ ให้เปลี่ยนสีอินพุตเป็นสีเขียว หากอยู่ระหว่างสิบถึงยี่สิบ - เป็นสีเหลือง และหากมากกว่ายี่สิบ - เป็นสีแดง