HTML DOM คุณสมบัติ Anchor rel

คุณสมบัติ HTML DOM Anchor Rel ส่งคืนแอตทริบิวต์ rel ของลิงก์ แอตทริบิวต์ rel อธิบายความสัมพันธ์ระหว่างเอกสารที่กำลังดำเนินการกับเอกสารที่เชื่อมโยง

ไวยากรณ์

ต่อไปนี้เป็นวากยสัมพันธ์ของ −

ก) คืนคุณสมบัติ rel -

anchorObject.rel

b) ตั้งค่าคุณสมบัติ rel &ลบ

anchorObject.rel = "value"

ตัวอย่าง

ให้เรามาดูตัวอย่างคุณสมบัติ HTML DOM anchor rel -

<!DOCTYPE html>
<html>
<body>
<h1>Example</h1>
<p><a id="anchorExample" rel="Rel Property" href="https://www.examplesite.com/">
Anchor Rel Property</a></p>
<p>Click on the button</p>
<button onclick="display()">Click me!</button>
<p id="show"></p>
<script>
   function display() {
      var docs = document.getElementById("anchorExample").rel;
      document.getElementById("show").innerHTML = docs;
   }
</script>
</body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

HTML DOM คุณสมบัติ Anchor rel

คลิกที่ "คลิกฉัน!" ปุ่มเพื่อรับคุณสมบัติ HTML DOM Anchor rel -

HTML DOM คุณสมบัติ Anchor rel

ในตัวอย่างข้างต้น −

เราได้นำแท็ก anchor ที่มีคุณสมบัติ rel มาใช้ในการระบุประเภทของความสัมพันธ์กับเอกสารที่เชื่อมโยง ซึ่งในโค้ดด้านบนคือ https://www.examplesite.com/

<p>
<a id="anchorExample" rel="Rel Property" href="https://www.examplesite.com/">Anchor Rel Property</a>
</p>

เราได้สร้างปุ่มชื่อ "คลิกฉัน" เพื่อใช้งานฟังก์ชันการแสดงผล -

<button onclick="display()">Click me!</button>

ฟังก์ชั่นการแสดงผลได้รับคุณสมบัติ rel ขององค์ประกอบด้วย id=” Anchor example” -

function display() {
   var docs = document.getElementById("anchorExample").rel;
   document.getElementById("show").innerHTML = docs;
}

เราได้สร้างปุ่มชื่อ "คลิกฉัน" เพื่อใช้งานฟังก์ชันการแสดงผล -