HTML Class Attribute

Attribute class มักถูกใช้เพื่อ เชื่อมโยงกับชื่อ Class ใน Style Sheet (CSS) ใช้โดย JavaScript เพื่อเข้าถึงและจัดการองค์ประกอบ (Elements) ที่มีชื่อ Class นั้น

การใช้ Class Attribute

Attribute class มักถูกใช้เพื่ออ้างอิงชื่อคลาสที่กำหนดไว้ใน Style Sheet (CSS) นอกจากนี้ยังสามารถใช้ร่วมกับ JavaScript เพื่อเข้าถึงและจัดการองค์ประกอบ (Elements) ที่มีชื่อคลาสนั้นได้

ตัวอย่างด้านล่างแสดงการใช้ <div> ทั้ง 3 ตัว โดยมี class="city" ซึ่งถูกจัดรูปแบบด้วย CSS ชื่อ .city

				
					<!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>

ตัวอย่างนี้ใช้ <span> สองตัว โดยมี class="note" เพื่อกำหนดรูปแบบข้อความให้เหมือนกัน

				
					<!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>

⚠️ หมายเหตุ Attribute class สามารถใช้ได้กับ Element HTML ทุกชนิด ระวังเรื่องตัวพิมพ์เล็ก–ใหญ่ของชื่อ Class ด้วย!

Syntax ของ Class

การสร้าง Class ใน CSS ใช้เครื่องหมายจุด (.) นำหน้าชื่อ Class แล้วกำหนด CSS Properties ภายใน { }

				
					<!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 หนึ่งสามารถมีได้ มากกว่าหนึ่ง Class
โดยคั่นชื่อคลาสแต่ละอันด้วย ช่องว่าง
เช่น

				
					<div class="city main">

ตัวอย่างนี้ <h2> ตัวแรกมีทั้ง Class city และ main

				
					<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

Elements ต่างกัน ใช้ Class เดียวกันได้

แม้ว่า Element จะต่างชนิดกัน ก็สามารถใช้ Class เดียวกันเพื่อแชร์รูปแบบเดียวกันได้

				
					<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

การใช้ Class กับ JavaScript

JavaScript สามารถเข้าถึงและจัดการ Elements ด้วยชื่อ Class โดยใช้ document.getElementsByClassName()

				
					<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

สรุป

class ใช้ระบุชื่อให้กับ Elements อย่างน้อย 1 ชื่อ
CSS และ JavaScript ใช้ชื่อ Class เพื่อเลือกและเข้าถึง Elements ได้
class ใช้ได้กับทุก Element HTML
ระวังตัวพิมพ์เล็ก–ใหญ่ของชื่อ Class
Elements ต่างชนิดกันสามารถใช้ Class เดียวกันได้
JavaScript เข้าถึง Elements ด้วย getElementsByClassName()