พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน class Attribute

ใน HTML5, class attribute เป็นคุณสมบัติที่ใช้ในการกำหนดกลุ่มขององค์ประกอบ (elements) ที่มีลักษณะหรือพฤติกรรมเหมือนกัน โดย class มักใช้เพื่อการจัดการกับ CSS หรือ JavaScript ได้อย่างสะดวก ทำให้นักพัฒนาสามารถนำรูปแบบการจัดการเดียวกันมาใช้ซ้ำได้ในหลายๆ ส่วนของหน้าเว็บ

ลักษณะการใช้งาน

<tag class="class1 class2 ...">Content</tag>

ตัวอย่างรูปแบบการใช้งาน

การกำหนดหลาย class ใน element เดียว

ใน HTML5 เราสามารถกำหนดได้หลาย class ใน element เดียว โดยแต่ละ class จะแยกกันด้วยช่องว่าง เช่น

HTML
<div class="box shadow"></div>

กรณีนี้ class box และ shadow จะถูกนำไปใช้กับ <div> ซึ่ง CSS ที่เกี่ยวข้องกับทั้งสอง class นี้จะถูกนำไปใช้ใน element นี้

การใช้ class ร่วมกับ CSS

เราสามารถกำหนด style ให้กับองค์ประกอบที่มี class บางอย่างผ่าน CSS ได้ เช่น

HTML
<p class="highlight">ข้อความที่ต้องการเน้น</p>

CSS

CSS
.highlight {
    color: red;
    font-weight: bold;
}

ผลลัพธ์: ข้อความใน <p> ที่มี class highlight จะถูกเปลี่ยนให้เป็นสีแดงและตัวหนา

การใช้ class ร่วมกับ JavaScript

เราสามารถใช้ JavaScript เพื่อจัดการกับองค์ประกอบที่มี class โดยการเพิ่ม, ลบ หรือสลับ class ก็ได้

ตัวอย่าง

HTML
<button class="btn">คลิกที่นี่</button>

JavaScript

JavaScript
const button = document.querySelector('.btn');
button.addEventListener('click', function() {
    this.classList.toggle('active');
});

ผลลัพธ์: เมื่อคลิกที่ปุ่ม class active จะถูกเพิ่มหรือถูกลบออกไป

การใช้หลาย class เพื่อจัดการ CSS เฉพาะเจาะจง

เราสามารถใช้หลาย class เพื่อจัดการกับลักษณะขององค์ประกอบในหลายๆ ด้านพร้อมกัน เช่น

HTML
<div class="card rounded shadow-lg"></div>

CSS

CSS
.card {
    padding: 20px;
    background-color: white;
}
.rounded {
    border-radius: 10px;
}
.shadow-lg {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

ในกรณีนี้ class card, rounded, และ shadow-lg จะถูกนำไปใช้พร้อมกันกับองค์ประกอบ <div>

การใช้ class ในการสร้าง layout ที่ตอบสนอง (Responsive)

การใช้ class ร่วมกับ CSS Framework เช่น Bootstrap จะช่วยให้การจัด layout ทำได้ง่ายขึ้น เช่น

HTML
<div class="container">
    <div class="row">
        <div class="col-md-6">Content 1</div>
        <div class="col-md-6">Content 2</div>
    </div>
</div>

โดย class container, row, และ col-md-6 เป็น class ที่ใช้ในการจัด layout แบบ responsive ซึ่งจะเปลี่ยนแปลงตามขนาดหน้าจอ

การใช้ class เพื่ออ้างอิงจาก JavaScript ในการจัดการ DOM

การใช้ class ทำให้เราสามารถใช้ JavaScript จัดการกับองค์ประกอบเฉพาะเจาะจงได้อย่างง่ายดาย เช่น

HTML
<div class="alert">Message</div>

JavaScript

JavaScript
document.querySelector('.alert').style.display = 'none';

ผลลัพธ์: ข้อความใน <div> ที่มี class alert จะถูกซ่อน

สรุป

class ใน HTML5 เป็นเครื่องมือที่สำคัญมากสำหรับการจัดการกับ CSS และ JavaScript ในเว็บ การใช้ class ช่วยให้เราสามารถกำหนดลักษณะขององค์ประกอบหลายๆ อันพร้อมกันได้ง่ายและสะดวก ซึ่งช่วยเพิ่มประสิทธิภาพในการพัฒนาเว็บ

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ