Thuộc tính cơ sở DOM HTML

Thuộc tính HTML DOM Base href được liên kết với thẻ HTML . Thẻ được sử dụng để chỉ định URL cơ sở cho tất cả các URL tương đối trong tài liệu HTML hiện tại. Có thể có tối đa một thẻ trong tài liệu HTML. Thuộc tính href cơ sở trả về giá trị của thuộc tính href trong phần tử cơ sở.

Cú pháp

Sau đây là cú pháp cho -

Đặt thuộc tính href -

baseObject.href = URL

Đây, URL là URL cơ sở.

Trả lại thuộc tính href -

baseObject.href

Ví dụ

Hãy để chúng tôi xem một ví dụ cho Thuộc tính href cơ sở -

<!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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Thuộc tính cơ sở DOM HTML

Khi nhấp vào nút ĐẶT CNTT -

Thuộc tính cơ sở DOM HTML

Khi nhấp vào nút NHẬN CNTT -

Thuộc tính cơ sở DOM HTML

Trong ví dụ trên -

Trước tiên, chúng tôi đã tạo một phần tử với id “myBase” và thuộc tính href có giá trị bằng https://www.bing.com

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

Sau đó, chúng tôi đã tạo một phần tử liên kết với thuộc tính href và giá trị bằng “/ images”. Ở đây “/ images” là một đường dẫn tương đối vì đường dẫn cơ sở được đưa ra trong thẻ cơ sở. Kết hợp cả URL phần tử cơ sở và phần tử neo, nó sẽ trở thành https://www.bing.com/images.

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

Sau đó, chúng tôi đã tạo hai nút SET IT và GET IT để gọi các hàm SetHref () và GetHref () tương ứng.

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

Hàm SetHref () nhận phần tử bằng cách sử dụng id “myBase”. Sau đó, nó đặt URL của nó bằng cách sử dụng thuộc tính href thành https://www.duckduckgo.com. Thông báo thay đổi thành công được hiển thị trong đoạn văn có id “Sample”.

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

GetHref () nhận phần tử bằng cách sử dụng id “myBase”. Sau đó, nó lấy URL của nó bằng cách sử dụng thuộc tính href và gán nó cho biến x. Sau đó, đoạn innerHTML được thay đổi bằng cách sử dụng thuộc tính innerHTML () thành x. Thao tác này sẽ hiển thị giá trị href của phần tử .

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