W3.JS เพิ่มคลาสให้กับ HTML

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

เพิ่มชั้นเรียน:

w3.addClass(selector,'class')

เพิ่มหลายคลาส:

w3.addClass(selector,'class1 class2 class3...')

เพิ่มคลาสโดย Id

เพิ่มคลาส "marked" ให้กับองค์ประกอบด้วย id="London":

ตัวอย่าง

<button onclick="w3.addClass('#London','marked')">Add Class</button>

เพิ่มชั้นเรียนโดยแท็ก

เพิ่มคลาส "marked" ให้กับองค์ประกอบ <h2> ทั้งหมด:

ตัวอย่าง

<button onclick="w3.addClass('h2','marked')">Add Class</button>

เพิ่มชั้นเรียนตามชั้นเรียน

เพิ่มคลาส "marked" ให้กับองค์ประกอบที่มี class="city":

ตัวอย่าง

<button onclick="w3.addClass('.city','marked')">Add Class</button>

เพิ่มหลายคลาส

หากต้องการเพิ่มหลายคลาสให้กับองค์ประกอบ ให้แยกแต่ละคลาสด้วยการเว้นวรรค

เพิ่มทั้ง "class1" และ "class2" ให้กับองค์ประกอบที่มี id="London":

ตัวอย่าง

<button onclick="w3.addClass('#London','class1 class2')">Add Classes</button>

ลบคลาสออกจากองค์ประกอบ HTML

ลบชั้นเรียน:

w3.removeClass(selector,'class')

ลบหลายคลาส:

w3.removeClass(selector,'class1 class2 class3...')

ลบคลาสโดย Id

ลบคลาส "marked" ออกจากองค์ประกอบที่มี id="London":

ตัวอย่าง

<button onclick="w3.removeClass('#London','marked')">Remove Class</button>

ลบชั้นเรียนโดย Tag

ลบคลาส "marked" ออกจากองค์ประกอบ <h2> ทั้งหมด:

ตัวอย่าง

<button onclick="w3.removeClass('h2','marked')">Remove Class</button>

ลบชั้นเรียนตามชั้นเรียน

ลบคลาส "marked" ออกจากองค์ประกอบทั้งหมดที่มี class="city":

ตัวอย่าง

<button onclick="w3.removeClass('.city','marked')">Remove Class</button>

ลบหลายคลาส

หากต้องการลบหลายคลาสออกจากองค์ประกอบ ให้แยกแต่ละคลาสด้วยการเว้นวรรค

ลบทั้ง "class1" และ "class2" ออกจากองค์ประกอบที่มี id="London":

ตัวอย่าง

<button onclick="w3.removeClass('#London','class1 class2')">Remove Classes</button>

สลับคลาสขององค์ประกอบ HTML

สลับชั้นเรียน (เปิด/ปิด):

w3.toggleClass(selector,'class')

สลับระหว่างสองคลาส:

w3.toggleClass(selector,'property','class','class')

สลับคลาสตาม Id

สลับระหว่างคลาส "marked" ขององค์ประกอบที่มี id="London":

ตัวอย่าง

<button onclick="w3.toggleClass('#London','marked')">Toggle</button>

สลับชั้นเรียนตามแท็ก

สลับระหว่างคลาส "ทำเครื่องหมาย" ขององค์ประกอบ <h2> ทั้งหมด:

ตัวอย่าง

<button onclick="w3.toggleClass('h2','marked')">Toggle</button>

สลับชั้นเรียนตามชั้นเรียน

สลับระหว่างคลาส "marked" ขององค์ประกอบทั้งหมดที่มี class="city":

ตัวอย่าง

<button onclick="w3.toggleClass('.city','marked')">Toggle</button>

สลับหลายคลาส

สลับระหว่างชื่อคลาส "class1" และ "class2" ของ id="London:

ตัวอย่าง

<button onclick="w3.toggleClass('#London','class1','class2')">Toggle</button>

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