คุณสมบัติ HTML DOM Base href

คุณสมบัติ HTML DOM Base href เชื่อมโยงกับแท็ก HTML แท็ก ใช้เพื่อระบุ URL ฐานสำหรับ URL ที่เกี่ยวข้องทั้งหมดในเอกสาร HTML ปัจจุบัน สามารถมีแท็ก ได้สูงสุดหนึ่งแท็กในเอกสาร HTML คุณสมบัติ Base href ส่งคืนค่าแอตทริบิวต์ href ในองค์ประกอบฐาน

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ −

การตั้งค่าคุณสมบัติ href -

baseObject.href = URL

ที่นี่ URL คือ URL พื้นฐาน

การส่งคืนคุณสมบัติ href -

baseObject.href

ตัวอย่าง

ให้เราดูตัวอย่างคุณสมบัติฐาน href -

<!DOCTYPE html>
<html>
<head>
<base id="myBase" href="https://www.bing.com">
</head>
<body>
<a href="/images">IMAGES</a>
<p>Click the below button to change href value of the above link</p>
<button onclick="SetHref()">SET IT</button>
<button onclick="GetHref()">GET IT</button>
<p id="Sample"></p>
<script>
   function SetHref() {
      document.getElementById("myBase").href = "https://duckduckgo.com";
      document.getElementById("Sample").innerHTML = "Base URL was changed from bing.com
      to duckduckgo.com";
   }
   function GetHref(){
      var x=document.getElementById("myBase").href;
   document.getElementById("Sample").innerHTML = x;
   }
</script>
</body>
</html>

ผลลัพธ์

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

คุณสมบัติ HTML DOM Base href

เมื่อคลิกปุ่ม SET IT -

คุณสมบัติ HTML DOM Base href

เมื่อคลิกปุ่ม GET IT -

คุณสมบัติ HTML DOM Base href

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

ขั้นแรกเราได้สร้าง องค์ประกอบที่มี id “myBase” และแอตทริบิวต์ href ที่มีค่าเท่ากับ https://www.bing.com

<base id="myBase" href="https://www.bing.com">

เราได้สร้างองค์ประกอบสมอที่มีแอตทริบิวต์ href และค่าเท่ากับ “/images” ในที่นี้ “/images” เป็นพาธสัมพัทธ์ตามพาธฐานที่ระบุในแท็กฐาน เมื่อรวม URL องค์ประกอบฐานและจุดยึดเข้าด้วยกันจะกลายเป็น https://www.bing.com/images

<a href="/images">IMAGES</a>

เราได้สร้างปุ่มสองปุ่ม SET IT และ GET IT เพื่อเรียกใช้ฟังก์ชัน SetHref() และ GetHref() ตามลำดับ

<button onclick="SetHref()">SET IT</button>
<button onclick="GetHref()">GET IT</button>

ฟังก์ชัน SetHref() รับองค์ประกอบ โดยใช้รหัส "myBase" จากนั้นตั้งค่า URL โดยใช้คุณสมบัติ href เป็น https://www.duckduckgo.com ข้อความแสดงความสำเร็จในการเปลี่ยนแปลงจะแสดงในย่อหน้าที่มีรหัส “ตัวอย่าง”

function SetHref() {
   document.getElementById("myBase").href = "https://duckduckgo.com";
   document.getElementById("Sample").innerHTML = "Base URL was changed from bing.com to .comduckduckgo";
}

GetHref() รับองค์ประกอบ โดยใช้รหัส "myBase" จากนั้นรับ URL โดยใช้คุณสมบัติ href และกำหนดให้กับตัวแปร x ย่อหน้า innerHTML จะถูกเปลี่ยนโดยใช้คุณสมบัติ innerHTML() เป็น x ซึ่งจะแสดงค่า href ขององค์ประกอบ

function GetHref(){
   var x=document.getElementById("myBase").href;
   document.getElementById("Sample").innerHTML = x;
}