พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน id Attribute

ใน HTML5 id Attribute มีความสำคัญในการระบุเอกลักษณ์ขององค์ประกอบ (Element) แต่ละตัวในหน้าเว็บ โดยต้องมั่นใจว่า id ของแต่ละองค์ประกอบมีความเป็นเอกลักษณ์เฉพาะภายในเอกสารเดียวกัน ซึ่งสามารถนำมาใช้ในการระบุจุดเฉพาะเจาะจงในหน้าเว็บ การสร้างลิงก์ภายใน (anchor link) การปรับแต่ง CSS หรือการใช้งาน JavaScript

การใช้งาน id Attribute พร้อมตัวอย่าง

ใช้เพื่อระบุเอกลักษณ์ขององค์ประกอบ

ตัวอย่างพื้นฐานคือการใช้ id เพื่อให้ CSS หรือ JavaScript เข้าถึงองค์ประกอบนั้นๆ ได้ง่าย

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ตัวอย่างการใช้ id</title>
    <style>
        #highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>

    <h1 id="highlight">ยินดีต้อนรับสู่เว็บไซต์ของเรา</h1>

    <p id="intro">นี่คือย่อหน้าที่เป็นส่วนของการแนะนำ</p>

</body>
</html>

ในตัวอย่างนี้ id="highlight" ถูกใช้กับ <h1> ซึ่งสามารถใช้ในการกำหนดสไตล์หรือการเขียนโค้ดเพื่อปรับแต่งข้อความนี้โดยเฉพาะ

การใช้ id ในการสร้าง Anchor Link (ลิงก์ภายใน)

สามารถใช้ id เพื่อสร้างลิงก์ที่เมื่อคลิกแล้ว จะเลื่อนหน้าไปยังตำแหน่งขององค์ประกอบที่มี id นั้น

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anchor Links</title>
</head>
<body>

    <h1>สารบัญ</h1>
    <ul>
        <li><a href="#section1">ส่วนที่ 1</a></li>
        <li><a href="#section2">ส่วนที่ 2</a></li>
        <li><a href="#section3">ส่วนที่ 3</a></li>
    </ul>

    <h2 id="section1">ส่วนที่ 1</h2>
    <p>เนื้อหาของส่วนที่ 1...</p>

    <h2 id="section2">ส่วนที่ 2</h2>
    <p>เนื้อหาของส่วนที่ 2...</p>

    <h2 id="section3">ส่วนที่ 3</h2>
    <p>เนื้อหาของส่วนที่ 3...</p>

</body>
</html>

ลิงก์ href="#section1" จะนำผู้ใช้ไปยังตำแหน่งขององค์ประกอบ <h2 id="section1"> โดยตรง

ใช้ร่วมกับ JavaScript

id สามารถใช้ร่วมกับ JavaScript เพื่อดึงข้อมูลหรือเปลี่ยนแปลงค่าขององค์ประกอบได้

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript with id</title>
</head>
<body>

    <h1 id="header">ข้อความเริ่มต้น</h1>
    <button onclick="changeText()">คลิกเพื่อเปลี่ยนข้อความ</button>

    <script>
        function changeText() {
            document.getElementById("header").innerHTML = "ข้อความเปลี่ยนแล้ว!";
        }
    </script>

</body>
</html>

เมื่อผู้ใช้คลิกปุ่ม จะทำให้ JavaScript เปลี่ยนข้อความในองค์ประกอบ <h1> ที่มี id="header"

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ