แอตทริบิวต์รหัส HTML
ตัวอย่าง
ใช้แอตทริบิวต์ id เพื่อจัดการข้อความด้วย JavaScript:
<html>
<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult()
{
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
แอตทริบิวต์id
ระบุรหัสเฉพาะสำหรับองค์ประกอบ HTML (ค่าต้องไม่ซ้ำกันภายในเอกสาร HTML)
แอตทริบิวต์id
นี้ใช้มากที่สุดเพื่อชี้ไปที่สไตล์ในสไตล์ชีต และโดย JavaScript (ผ่าน HTML DOM) เพื่อจัดการองค์ประกอบด้วย id เฉพาะ
รองรับเบราว์เซอร์
Attribute | |||||
---|---|---|---|---|---|
id | Yes | Yes | Yes | Yes | Yes |
ไวยากรณ์
<element id="id">
ค่าแอตทริบิวต์
Value | Description |
---|---|
id | Specifies a unique id for the element.
Naming rules:
|
ตัวอย่างเพิ่มเติม
ตัวอย่าง 1
ใช้แอตทริบิวต์ id เพื่อเชื่อมโยงไปยังองค์ประกอบที่มีรหัสที่ระบุภายในหน้า:
<html>
<body>
<h2><a id="top">Some heading</a></h2>
<p>Lots of text....</p>
<p>Lots of text....</p>
<p>Lots of text....</p>
<a href="#top">Go to top</a>
</body>
</html>
ตัวอย่าง 2
ใช้แอตทริบิวต์ id เพื่อจัดรูปแบบข้อความด้วย CSS:
<html>
<head>
<style>
#myHeader {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">W3Schools is the best!</h1>
</body>
</html>
หน้าที่เกี่ยวข้อง
บทช่วยสอน HTML: รหัส HTML
บทช่วยสอน HTML: แอตทริบิวต์ HTML
บทช่วยสอน CSS: ไวยากรณ์ CSS
การอ้างอิง CSS: CSS #id Selector
การอ้างอิง HTML DOM: HTML DOM getElementById() Method
การอ้างอิง HTML DOM: คุณสมบัติ HTML DOM id
การอ้างอิง HTML DOM: HTML DOM Style Object