คุณสมบัติคลาส HTML
แอตทริบิวต์ HTML classใช้เพื่อระบุคลาสสำหรับองค์ประกอบ HTML
องค์ประกอบ HTML หลายรายการสามารถแชร์คลาสเดียวกันได้
การใช้คุณสมบัติคลาส
แอตทริบิวต์classนี้มักใช้เพื่อชี้ไปที่ชื่อคลาสในสไตล์ชีต JavaScript สามารถใช้เพื่อเข้าถึงและจัดการองค์ประกอบด้วยชื่อคลาสเฉพาะ
ในตัวอย่างต่อไปนี้ เรามีสาม<div>องค์ประกอบพร้อมclassแอตทริบิวต์ที่มีค่าของ "เมือง" องค์ประกอบ ทั้งสาม<div>
จะถูกจัดรูปแบบให้เท่ากันตาม.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แอตทริบิวต์ที่มีค่า "หมายเหตุ" องค์ประกอบ ทั้งสอง<span>
จะถูกจัดรูปแบบอย่างเท่าเทียมกันตาม.note
คำจำกัดความของรูปแบบในส่วนหัว:
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
เคล็ดลับ:classสามารถใช้แอตทริบิวต์นี้กับองค์ประกอบHTML ใดก็ได้
หมายเหตุ:ชื่อคลาสต้องตรงตามตัวพิมพ์เล็กและตัวพิมพ์ใหญ่!
เคล็ดลับ:คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ CSS ได้ใน บทช่วย สอน CSSของ เรา
ไวยากรณ์สำหรับคลาส
เพื่อสร้างชั้นเรียน เขียนอักขระจุด (.) ตามด้วยชื่อคลาส จากนั้นกำหนดคุณสมบัติ CSS ภายในวงเล็บปีกกา {}:
ตัวอย่าง
สร้างคลาสชื่อ "เมือง":
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<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>
หลายชั้นเรียน
องค์ประกอบ HTML สามารถเป็นของมากกว่าหนึ่งคลาส
ในการกำหนดหลายคลาส แยกชื่อคลาสด้วยการเว้นวรรค เช่น <div class="city main"> องค์ประกอบจะถูกจัดรูปแบบตามคลาสทั้งหมดที่ระบุ
ในตัวอย่างต่อไปนี้<h2>องค์ประกอบแรกเป็นของทั้ง
cityคลาสและmainคลาสด้วย และจะได้รับสไตล์ CSS จากทั้งสองคลาส:
ตัวอย่าง
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
องค์ประกอบที่แตกต่างกันสามารถแชร์คลาสเดียวกันได้
องค์ประกอบ HTML ที่แตกต่างกันสามารถชี้ไปที่ชื่อคลาสเดียวกันได้
ในตัวอย่างต่อไปนี้ ทั้ง<h2>และ<p>
ชี้ไปที่คลาส "เมือง" และจะมีลักษณะเหมือนกัน:
ตัวอย่าง
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
การใช้แอตทริบิวต์คลาสใน JavaScript
ชื่อคลาสยังสามารถใช้โดย JavaScript เพื่อทำงานบางอย่างสำหรับองค์ประกอบเฉพาะ
JavaScript สามารถเข้าถึงองค์ประกอบด้วยชื่อคลาสเฉพาะด้วยgetElementsByClassName()เมธอด:
ตัวอย่าง
คลิกที่ปุ่มเพื่อซ่อนองค์ประกอบทั้งหมดที่มีชื่อคลาส "เมือง":
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script>
อย่ากังวลหากคุณไม่เข้าใจโค้ดในตัวอย่างด้านบน
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ JavaScript ใน บท HTML JavaScript ของเรา หรือคุณสามารถศึกษา บทช่วย สอน JavaScriptของ เรา
สรุปบท
- แอตทริบิวต์ HTML
classระบุชื่อคลาสอย่างน้อยหนึ่งชื่อสำหรับองค์ประกอบ - CSS และ JavaScript ใช้คลาสเพื่อเลือกและเข้าถึงองค์ประกอบเฉพาะ
- แอตทริบิวต์
classนี้ใช้กับองค์ประกอบ HTML ใดก็ได้ - ชื่อคลาสต้องตรงตามตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
- องค์ประกอบ HTML ที่แตกต่างกันสามารถชี้ไปที่ชื่อคลาสเดียวกันได้
- JavaScript สามารถเข้าถึงองค์ประกอบด้วยชื่อคลาสเฉพาะด้วย
getElementsByClassName()เมธอด