ข้อมูลอ้างอิงHTML

HTML โดยตัวอักษร HTML ตามหมวดหมู่ รองรับ HTML Browser แอตทริบิวต์ HTML HTML Global Attributes เหตุการณ์ HTML HTML สี HTML Canvas HTML เสียง/วิดีโอ ชุดอักขระ HTML HTML Doctypes การเข้ารหัส URL HTML รหัสภาษา HTML รหัสประเทศ HTML ข้อความ HTTP วิธี HTTP ตัวแปลง PX เป็น EM แป้นพิมพ์ลัด


แอตทริบิวต์รหัส 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:
  • Must contain at least one character
  • Must not contain any space characters

ตัวอย่างเพิ่มเติม

ตัวอย่าง 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