แอตทริบิวต์รหัส HTML
แอตทริบิวต์ HTML idใช้เพื่อระบุรหัสเฉพาะสำหรับองค์ประกอบ HTML
คุณไม่สามารถมีองค์ประกอบที่มี id เดียวกันมากกว่าหนึ่งองค์ประกอบในเอกสาร HTML
การใช้แอตทริบิวต์รหัส
แอตทริบิวต์idระบุรหัสเฉพาะสำหรับองค์ประกอบ HTML ค่าของid
แอตทริบิวต์ต้องไม่ซ้ำกันภายในเอกสาร HTML
คุณลักษณะidนี้ใช้เพื่อชี้ไปที่การประกาศลักษณะเฉพาะในสไตล์ชีต จาวาสคริปต์ยังใช้เพื่อเข้าถึงและจัดการองค์ประกอบด้วยรหัสเฉพาะ
ไวยากรณ์สำหรับ id คือ: เขียนอักขระแฮช (#) ตามด้วยชื่อ id จากนั้น กำหนดคุณสมบัติ CSS ภายในวงเล็บปีกกา {}
ในตัวอย่างต่อไปนี้ เรามี<h1>องค์ประกอบที่ชี้ไปที่ชื่อรหัส "myHeader" องค์ประกอบ นี้<h1>
จะถูกจัดรูปแบบตาม#myHeader
คำจำกัดความของรูปแบบในส่วนหัว:
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My
Header</h1>
</body>
</html>
หมายเหตุ:ชื่อรหัสต้องตรงตามตัวพิมพ์เล็กและตัวพิมพ์ใหญ่!
หมายเหตุ:ชื่อรหัสต้องมีอักขระอย่างน้อยหนึ่งตัว ไม่สามารถเริ่มต้นด้วยตัวเลข และต้องไม่มีช่องว่าง (ช่องว่าง แท็บ ฯลฯ)
ความแตกต่างระหว่างคลาสและ ID
ชื่อคลาสสามารถใช้ได้โดยองค์ประกอบ HTML หลายรายการ ในขณะที่ชื่อรหัสจะต้องใช้โดยองค์ประกอบ HTML เดียวภายในหน้า:
ตัวอย่าง
<style>
/* Style the element with the id "myHeader"
*/
#myHeader {
background-color: lightblue;
color: black;
padding:
40px;
text-align: center;
}
/* Style all
elements with the class name "city" */
.city
{
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My
Cities</h1>
<!-- Multiple elements with same class -->
<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>
เคล็ดลับ:คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ CSS ได้ใน บทช่วย สอน CSSของ เรา
บุ๊กมาร์ก HTML พร้อม ID และลิงก์
บุ๊กมาร์ก HTML ใช้เพื่อให้ผู้อ่านข้ามไปยังส่วนต่างๆ ของหน้าเว็บได้
บุ๊กมาร์กจะมีประโยชน์หากหน้าของคุณยาวมาก
หากต้องการใช้บุ๊กมาร์ก คุณต้องสร้างบุ๊กมาร์กก่อน จากนั้นจึงเพิ่มลิงก์ลงในบุ๊กมาร์ก
จากนั้นเมื่อคลิกลิงก์ หน้าจะเลื่อนไปยังตำแหน่งที่มีบุ๊กมาร์ก
ตัวอย่าง
ขั้นแรก สร้างบุ๊กมาร์กด้วยidแอตทริบิวต์:
<h2 id="C4">Chapter 4</h2>
จากนั้น เพิ่มลิงก์ไปยังบุ๊กมาร์ก ("ข้ามไปยังบทที่ 4") จากภายในหน้าเดียวกัน:
ตัวอย่าง
<a href="#C4">Jump to Chapter 4</a>
หรือเพิ่มลิงก์ไปยังบุ๊กมาร์ก ("ข้ามไปยังบทที่ 4") จากหน้าอื่น:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
การใช้แอตทริบิวต์ id ใน JavaScript
แอตทริบิวต์idนี้ยังสามารถใช้โดย JavaScript เพื่อทำงานบางอย่างสำหรับองค์ประกอบเฉพาะนั้น
JavaScript สามารถเข้าถึงองค์ประกอบที่มี id เฉพาะด้วยgetElementById()เมธอด:
ตัวอย่าง
ใช้idแอตทริบิวต์เพื่อจัดการข้อความด้วย JavaScript:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
เคล็ดลับ:ศึกษา JavaScript ใน บท HTML JavaScriptหรือใน บทช่วย สอน JavaScriptของ เรา
สรุปบท
- แอตทริบิวต์
idใช้เพื่อระบุรหัสเฉพาะสำหรับองค์ประกอบ HTML - ค่าของ
idแอตทริบิวต์ต้องไม่ซ้ำกันภายในเอกสาร HTML - แอตทริบิวต์
idนี้ใช้โดย CSS และ JavaScript เพื่อจัดรูปแบบ/เลือกองค์ประกอบเฉพาะ - ค่าของ
idแอตทริบิวต์จะคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ - แอตทริบิวต์
idนี้ยังใช้เพื่อสร้างบุ๊กมาร์ก HTML - JavaScript สามารถเข้าถึงองค์ประกอบด้วยรหัสเฉพาะด้วย
getElementById()เมธอด