วิธี addClass

วิธี addClass เพิ่ม คลาส CSS ที่กำหนดให้กับองค์ประกอบ

ไวยากรณ์

หนึ่งคลาส CSS:

javascript$(selector).addClass(ชื่อคลาส CSS);

หลายคลาส CSS (เป็นสตริง):

javascript$(selector).addClass('class1 class2 class3 ...');

หลายคลาส CSS (เป็นอาร์เรย์):

javascript$(selector).addClass(['class1', 'class2', 'class3', '...']);

การใช้ฟังก์ชันกับแต่ละองค์ประกอบในชุด:

javascript$(selector).addClass(function(หมายเลขในชุด, คลาส CSS ปัจจุบันขององค์ประกอบ));

ตัวอย่าง

ย่อหน้าของเราไม่มีคลาสเลย มาลอง เพิ่มคลาส www ให้มัน:

html<p id="test">text</p>
javascript$('#test').addClass('www');

โค้ด HTML จะกลายเป็นแบบนี้:

html<p id="test" class="www">text</p>

ตัวอย่าง

ย่อหน้าของเรามีคลาสอยู่แล้ว มาลองเพิ่ม คลาส www ให้มันอีก:

html<p id="test" class="eee">text</p>
javascript$('#test').addClass('www');

โค้ด HTML จะกลายเป็นแบบนี้:

html<p id="test" class="eee www">text</p>

ตัวอย่าง

ย่อหน้าของเรามีคลาสอยู่แล้วสองคลาส มาลอง เพิ่มคลาส www ให้มันอีก:

html<p id="test" class="eee ggg">text</p>
javascript$('#test').addClass('www');

โค้ด HTML จะกลายเป็นแบบนี้:

html<p id="test" class="eee ggg www">text</p>

ตัวอย่าง

ย่อหน้าของเรามีคลาสอยู่แล้ว มาลองเพิ่ม คลาสให้มันอีกสองคลาส - www และ ggg:

html<p id="test" class="eee">text</p>
javascript$('#test').addClass('www ggg');

โค้ด HTML จะกลายเป็นแบบนี้:

html<p id="test" class="eee www ggg">text</p>

ดูเพิ่มเติม

  • วิธี removeClass, toggleClass, hasClass
  • คุณสมบัติ JavaScript classlist,
    ซึ่งสามารถใช้เพิ่มและลบคลาส CSS ขององค์ประกอบด้วย JavaScript ล้วนๆ