ตัวเรียน HTML id คุณสมบัติ

HTML id คุณสมบัตินี้ใช้เพื่อกำหนด id ที่เด่นเดี่ยวแก่องค์ประกอบ HTML

ในเอกสาร HTML ไม่สามารถมีองค์ประกอบที่มี id ซ้ำกันได้

ใช้คุณสมบัติ id

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

id คุณสมบัตินี้ใช้เพื่อไปยังการบอกเล่าสไตล์เฉพาะในตารางสไตล์ และ JavaScript ก็สามารถใช้มันเพื่อเข้าถึงและปฏิบัติต่อองค์ประกอบที่มี id ที่เฉพาะเจาะจง

id ภาษาบูรยางค์คือ：เขียนขีดไอดี (#) ตามด้วยชื่อ id แล้ว จากนั้น กำหนดคุณสมบัติ CSS ในวงเล็บ {}

ตัวอย่างด้านล่างนี้เรามี <h1> จะเลื่อนไปยัง id ชื่อ "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 มีความยอมรับต่อการแปลงในรูปแบบตัวใหญ่หรือตัวเล็ก

หมายเหตุ:id จะต้องมีอย่างน้อยหนึ่งตัวอักษร และไม่ควรมีอักษรเปลี่ยนแปลง

ความแตกต่างระหว่าง Class และ ID

ชื่อคลาสสามารถถูกใช้โดยหลายองค์ประกอบ HTML แต่ชื่อ id ต้องเป็นองค์ประกอบเดียวของหน้าเว็บเท่านั้น

ตัวอย่าง

<style>
/* กำหนดสไตล์สำหรับองค์ประกอบที่มี id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* กำหนดสไตล์สำหรับองค์ประกอบที่มีชื่อคลาส "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- องค์ประกอบที่มี id แค่ตัวเดียว -->
<h1 id="myHeader">My Cities</h1>
<!-- องค์ประกอบหลายตัวที่มีชื่อคลาสเดียวกัน -->
<h2 class="city">ลอนดอน</h2>
<p>กรุงลอนดอนคือเมืองหลวงของอังกฤษ</p>
<h2 class="city">ปารีส</h2>
<p>กรุงปารีสคือเมืองหลวงของฝรั่งเศส</p>
<h2 class="city">โตเกียว</h2>
<p>กรุงโตเกียวคือเมืองหลวงของญี่ปุ่น</p>

ทดลองด้วยตัวเอง

คำแนะนำ:กรุณาเข้าถึง การเรียนรู้ CSS เรียนรู้ CSS มากยิ่งขึ้น

ทาก HTML ผ่าน ID และลิงก์

ทาก HTML ใช้เพื่อให้ผู้อ่านสามารถกระโดดไปยังส่วนที่เฉพาะของหน้าเว็บ

หากหน้าเว็บยาวมาก ทากอาจจะมีประโยชน์มาก

เพื่อใช้ทาグ คุณจะต้องสร้างมันเกิดขึ้นก่อน และเพิ่มลิงก์เข้าไปด้วย

เมื่อกดลิงก์ หน้าเว็บจะเลื่อนไปยังตำแหน่งที่มีทาグ

ตัวอย่าง

เริ่มต้นด้วย id ตัวแปรสร้างหลักข้อมูล:

<h2 id="C4">บทที่ 4</h2>

แล้ว ในหน้าเดียวกัน ใส่ลิงก์ไปยังหลักข้อมูลนี้ ("ไปยังบทที่ 4")

ตัวอย่าง

<a href="#C4">ไปยังบทที่ 4</a>

ทดลองด้วยตัวเอง

หรือ ในหน้าอื่น สร้างลิงก์ที่หนุนต่อหลักข้อมูลนี้ ("ไปยังบทที่ 4")

<a href="html_demo.html#C4">ไปยังบทที่ 4</a>

ใช้ตัวแปร id ใน JavaScript

JavaScript ยังสามารถใช้ตัวแปร id ในการทำงานกับองค์ประกอบที่เฉพาะ

JavaScript สามารถใช้ getElementById() วิธีเข้าถึงองค์ประกอบที่มี id พิเศษ:

ตัวอย่าง

ใช้ตัวแปร id ผ่าน JavaScript ในการจัดการข้อความ:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

ทดลองด้วยตัวเอง

คำแนะนำ:โปรด ตัวเรียน HTML JavaScript ในบทนี้ หรือของเรา การเรียนรู้ JavaScript ที่นี่เรียน JavaScript。

สรุปบทที่นี้

  • id ตัวแปรใช้เพื่อกำหนด id แบบเดียวขององค์ประกอบ HTML
  • id ค่าของตัวแปรต้องเป็นที่เดียวของเอกสาร HTML
  • CSS และ JavaScript สามารถใช้ id ตัวแปรใช้เพื่อเลือกองค์ประกอบหรือตั้งรูปแบบสำหรับองค์ประกอบที่เฉพาะ
  • id ค่าของตัวแปรแบบภาษาไทยเป็นไปตามหลักตัวอักษร
  • id ตัวแปรยังสามารถใช้เพื่อสร้างหลักข้อมูล HTML ด้วย
  • JavaScript สามารถใช้ getElementById() วิธีเข้าถึงองค์ประกอบที่มี id พิเศษ