วิธี addClass
วิธี addClass เพิ่ม
คลาส CSS ที่กำหนดให้กับองค์ประกอบ
ไวยากรณ์
หนึ่งคลาส CSS:
$(selector).addClass(ชื่อคลาส CSS);
หลายคลาส CSS (เป็นสตริง):
$(selector).addClass('class1 class2 class3 ...');
หลายคลาส CSS (เป็นอาร์เรย์):
$(selector).addClass(['class1', 'class2', 'class3', '...']);
การใช้ฟังก์ชันกับแต่ละองค์ประกอบในชุด:
$(selector).addClass(function(หมายเลขในชุด, คลาส CSS ปัจจุบันขององค์ประกอบ));
ตัวอย่าง
ย่อหน้าของเราไม่มีคลาสเลย มาลอง
เพิ่มคลาส www ให้มัน:
<p id="test">text</p>
$('#test').addClass('www');
โค้ด HTML จะกลายเป็นแบบนี้:
<p id="test" class="www">text</p>
ตัวอย่าง
ย่อหน้าของเรามีคลาสอยู่แล้ว มาลองเพิ่ม
คลาส www ให้มันอีก:
<p id="test" class="eee">text</p>
$('#test').addClass('www');
โค้ด HTML จะกลายเป็นแบบนี้:
<p id="test" class="eee www">text</p>
ตัวอย่าง
ย่อหน้าของเรามีคลาสอยู่แล้วสองคลาส มาลอง
เพิ่มคลาส www ให้มันอีก:
<p id="test" class="eee ggg">text</p>
$('#test').addClass('www');
โค้ด HTML จะกลายเป็นแบบนี้:
<p id="test" class="eee ggg www">text</p>
ตัวอย่าง
ย่อหน้าของเรามีคลาสอยู่แล้ว มาลองเพิ่ม
คลาสให้มันอีกสองคลาส - www และ ggg:
<p id="test" class="eee">text</p>
$('#test').addClass('www ggg');
โค้ด HTML จะกลายเป็นแบบนี้:
<p id="test" class="eee www ggg">text</p>
ดูเพิ่มเติม
-
วิธี
removeClass,toggleClass,hasClass -
คุณสมบัติ JavaScript
classlist,
ซึ่งสามารถใช้เพิ่มและลบคลาส CSS ขององค์ประกอบด้วย JavaScript ล้วนๆ
