jQuery - รับและตั้งค่าคลาส CSS
ด้วย jQuery มันง่ายในการจัดการสไตล์ขององค์ประกอบ
jQuery การจัดการ CSS
jQuery มีหลายวิธีในการจัดการ CSS เราจะดูวิธีการดังต่อไปนี้:
addClass()- เพิ่มอย่างน้อยหนึ่งคลาสให้กับองค์ประกอบที่เลือกremoveClass()- ลบคลาสอย่างน้อยหนึ่งคลาสออกจากองค์ประกอบที่เลือกtoggleClass()- สลับระหว่างการเพิ่ม/ลบคลาสจากองค์ประกอบที่เลือกcss()- ตั้งค่าหรือส่งคืนแอตทริบิวต์สไตล์
ตัวอย่างสไตล์ชีต
สไตล์ชีตต่อไปนี้จะใช้กับตัวอย่างทั้งหมดในหน้านี้:
.important
{
font-weight: bold;
font-size: xx-large;
}
.blue
{
color: blue;
}
jQuery addClass() เมธอด
ตัวอย่างต่อไปนี้แสดงวิธีการเพิ่มแอตทริบิวต์ของคลาสให้กับองค์ประกอบต่างๆ แน่นอนคุณสามารถเลือกหลายองค์ประกอบเมื่อเพิ่มคลาส:
ตัวอย่าง
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
คุณยังสามารถระบุหลายคลาสภายในaddClass()เมธอด:
ตัวอย่าง
$("button").click(function(){
$("#div1").addClass("important blue");
});
jQuery removeClass() เมธอด
ตัวอย่างต่อไปนี้แสดงวิธีการลบแอตทริบิวต์ class เฉพาะออกจากองค์ประกอบต่างๆ:
ตัวอย่าง
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
jQuery toggleClass() เมธอด
ตัวอย่างต่อไปนี้จะแสดงวิธีการใช้toggleClass()เมธอด jQuery เมธอดนี้สลับไปมาระหว่างการเพิ่ม/ลบคลาสจากองค์ประกอบที่เลือก:
ตัวอย่าง
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
jQuery css() เมธอด
วิธี jQuery css()จะอธิบายในบทต่อไป
แบบฝึกหัด jQuery
การอ้างอิง jQuery CSS
สำหรับภาพรวมทั้งหมดของเมธอด jQuery CSS โปรดไปที่jQuery HTML/CSS Referenceของเรา