การใช้ Class Attribute
Attribute class มักจะถูกใช้เพื่อชี้ไปยัง class name ในส่วน Style Sheet และยังสามารถใช้ Javascript เพื่อเข้าถึงและจัดการองค์ประกอบที่ถูกระบุชื่อ Class ที่สร้างไว้
จากตัวอย่างด้านล่างนี้ มี elements <div> กับ class Attribute ที่มีค่าชื่อว่า “city” ทั้ง 3 elements <div> นี้จะถูกจัดให้มีรูปแบบเหมือนกันตามค่าที่กำหนดไว้ใน .city ที่ตั้งไว้ในส่วนของ header
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
จากตัวอย่างด้านล่างนี้ เรามีการใช้ element <span> 2 elements กับ กับ class Attribute ที่มีค่าชื่อว่า “note” ทั้ง 2 elements <span> นี้จะถูกจัดให้มีรูปแบบเหมือนกันตามค่าที่กำหนดไว้ใน .note ที่ตั้งไว้ในส่วนของ header
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>นี่คือ <span class="note">ข้อความสำคัญ</span>ส่วนหัวเรื่อง</h1>
<p>นี่เป็นเพียงบางส่วน <span class="note">ข้อความสำคัญ</span>ของบทความ.</p>
</body>
</html>
Tip: attribute <class> จะสามารถใช้กับ element HTML ได้ทุกอัน
Note: ชื่อ class นั้นจะต้องระวังเรื่องตัวพิมพ์เล็ก ใหญ่ที่ใช้ด้วย
The Syntax For Class
สำหรับการสร้าง class นั้นให้เขียนจุด (.) จากนั้นตามด้วยชื่อ class แล้วระบบ CSS properties ภายใต้ { }
ตัวอย่างการเขียน class
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>The class Attribute</h2>
<p>การใช้ CSS กับ style elements โดยใช้ชื่อ class ว่า "city":</p>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
Multiple Classes
element HTML สามารถมี class ได้มากกว่า 1
ในกรณีที่มีหลายๆ class จะแยกแต่ละ class ด้วยการเว้นวรรค ยกตัวอย่างเช่น <div class=”city main”> ซึ่ง element จะถูกจัดรูปแบบตาม class ที่ระบุ
จากตัวอย่างด้านล่างนี้ element <h2> แรกนั้นเป็น class ของ city ทั้งหมดรวมถึง class main ด้วย และรูปแบบของ CSS Styles จะได้รับการจัดรูปแบบจาก class ด้วยเช่นกัน
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
text-align: center;
}
</style>
</head>
<body>
<h2>Multiple Classes</h2>
<p>นี่เป็น h2 elements ทั้ง 3 elements ซึ่งใช้งาน class "city" นอกจากนี้ London ยังใช้ class "main" ซึ่งมีการจัดรูปแบบข้อความแบบกึ่งกลางด้วย</p>
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
</body>
</html>
Elements ที่ต่างกัน สามารถใช้ Class เดียวกันได้
elements HTML ที่แตกต่างกัน สามารถใช้ class เดียวกันได้
จากตัวอย่างด้านล่างทั้ง <h2> และ <p> ใช้ class “city” และมีการแชร์รูปแบบเดียวกัน
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Elements ที่ต่างกัน สามารถใช้ Class เดียวกันได้</h2>
<p>แม้ว่าทั้ง 2 elements จะมี tag ที่ไม่เหมือนกัน แต่ทั้ง 2 นั้นมีการชี้ไปยัง class เดียวกันและมีรูปแบบ CSS เหมือนกัน</p>
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France.</p>
</body>
</html>
การใช้ Attribut class ใน JavaScript
ชื่อ class มักจะถูกใช้โดย JavaScript เพื่อทำหน้าที่บางอย่างสำหรับองค์ประกอบเฉพาะ
JavaScript สามารถเข้าถึง elements ด้วยชื่อ class โดยเฉพาะด้วยวิธีการ getElementsByClassName()
<!DOCTYPE html>
<html>
<body>
<h2>การใช้ Attribut class ใน JavaScript</h2>
<p>คลิกที่ปุ่มเพื่อซ่อน elements ที่ใช้งาน class "city" ทั้งหมด:</p>
<button onclick="myFunction()">Hide elements</button>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</body>
</html>
เมื่อคลิกที่ปุ่ม “Hide elements” จะแสดงผลลัพธ์ ดังภาพ
สรุป
- attribute class ของ HTML จะระบุชื่อย่างน้อย 1 ชื่อสำหรับ element
- JavaScript และ CSS สามารถใช้ class ได้ในการเลือกและเข้าถึง element เฉพาะได้
- attribute class สามารถใช้ได้กับทุก element HTML
- ชื่อ class นั้นจะต้องระวังเรื่องตัวพิมพ์เล็ก ใหญ่ที่ใช้ด้วย
- Elements ที่ต่างกัน สามารถใช้ Class เดียวกันได้
- avaScript สามารถเข้าถึง elements ด้วยชื่อ class โดยเฉพาะด้วยวิธีการ getElementsByClassName()
