คุณสมบัติ id ของ HTML

คำแนะนำหลักสูตร:

id คำอธิบายและวิธีใช้

id คุณสมบัตินี้กำหนด id ที่เป็นเดียวที่สำหรับองค์ประกอบ HTML (ค่านี้ต้องเป็นเดียวที่สำหรับเอกสาร HTML)

id คุณสมบัตินี้ใช้บ่อยที่สุดเพื่อหนุนโซลูชันที่จะหนุนการอ้างอิงสไตล์ในตารางสไตล์ (style sheet) และการปฏิบัติการด้วย JavaScript (ผ่าน HTML DOM) โดยอ้างอิงองค์ประกอบที่มี id ที่กำหนด

คุณสมบัตินี้ก็สามารถใช้เป็นที่ยึดของลิงก์ (link anchor) ด้วย

HTML idดูเพิ่มเติมที่

HTML idคุณสมบัติของ HTML

วิธีเรียน HTML:ระบบแสดงผล CSS

วิธีเรียน CSS:คู่มืออ้างอิง CSS:id CSS #

คู่มืออ้างอิง HTML DOM:วิธีเลือก

คู่มืออ้างอิง HTML DOM:คุณสมบัติ id ของ HTML DOM

คู่มืออ้างอิง HTML DOM:ตัวแทน Style ของ HTML DOM

ตัวอย่าง

ตัวอย่าง 1

ใช้คุณสมบัติ id ผ่าน JavaScript ที่จะเปลี่ยนข้อความขององค์ประกอบ HTML นี้:

<html>
<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">เปลี่ยนข้อความ</button>
<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>

ทดสอบเอง

มีตัวอย่างเพิ่มเติมที่ด้านล่างของหน้า

ความเข้าใจ

<element id="id">

ค่าของคุณสมบัติ

ค่า คำอธิบาย
id

กำหนด id โดยเฉพาะกับองค์ประกอบเดียวโดยเฉพาะ ข้อกำหนดชื่อนั้นเป็น：

  • ต้องมีอักษรหรืออักษรอื่นอย่างน้อยหนึ่งตัว
  • ไม่สามารถมีอักษรวรรษาแบบหรือช่องว่างใดๆ

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

ตัวอย่าง 2

ใช้คุณสมบัติ id ซึ่งเชื่อมโยงไปยังองค์ประกอบภายในหน้าที่มี id ที่กำหนดมาก่อน：

<html>
<body>
<h2><a id="top">หัวข้อบางอย่าง</a></h2>
<p>หลายๆข้อความ ....</p>
<p>หลายๆข้อความ ....</p>
<p>หลายๆข้อความ ....</p>
<a href="#top">กลับสู่ด้านบน</a>
</body>
</html>

ทดสอบเอง

ตัวอย่าง 3

ตัวอย่าง 3 ใช้คุณสมบัติ id ที่ผ่านมาทำแบบภาพของ CSS ตัวอย่าง

<html>
<head>
<style>
#myHeader {
  color: red;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">CodeW3C.com คือที่ดีที่สุด！</h1>
</body>
</html>

ทดสอบเอง

การสนับสนุนโปรแกรมนี้

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน