jQuery กู้และตั้งค่าคลาส CSS

ผ่าน jQuery คุณสามารถปฏิบัติ CSS องค์ประกอบง่ายๆ

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() 方法

ตัวอย่างด้านล่างจะแสดงวิธีการลบคลาสที่กำหนดไว้จากองค์ประกอบต่างๆ

ตัวอย่าง

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

ทดลองด้วยตัวเอง

jQuery toggleClass() 方法

ตัวอย่างด้านล่างจะแสดงวิธีการใช้ jQuery toggleClass() มีการเพิ่ม/ลบคลาสขององค์ประกอบที่ถูกเลือก

ตัวอย่าง

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

ทดลองด้วยตัวเอง

jQuery css() 方法

เราจะรับเรื่องราว jQuery css() ในบทถัดไป

jQuery HTML คู่มือปฏิบัติ

ถ้าคุณต้องการข้อมูลเต็มเกี่ยวกับวิธีการ jQuery CSS โปรดเข้าชม jQuery CSS คู่มือปฏิบัติ