ล่าสุดการพัฒนาเว็บบทเรียน
 

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() วิธีการจะอธิบายในบทต่อไป

ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»

jQuery CSS อ้างอิง

สำหรับภาพรวมทั้งหมดของทุกวิธีการ jQuery CSS, โปรดไปที่เรา jQuery HTML / CSS อ้างอิง


❮ก่อนหน้า ถัดไปบท❯