Thuộc tính mục tiêu HTML DOM Anchor

Thuộc tính đích HTML DOM được liên kết với thẻ liên kết () chỉ định nơi trang web mới sẽ mở sau khi nhấp vào URL. Nó có thể có các giá trị sau -

_blank - Thao tác này sẽ mở tài liệu được liên kết trong một cửa sổ mới.
_parent - Thao tác này sẽ mở tài liệu được liên kết trong bộ khung chính.
_top - Thao tác này sẽ mở tài liệu được liên kết trong cửa sổ toàn thân.
_self - Thao tác này sẽ mở tài liệu được liên kết trong cùng một cửa sổ. Đây là hành vi mặc định
tên khung - Thao tác này sẽ mở tài liệu được liên kết theo tên khung đã chỉ định.

Cú pháp

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

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

anchorObject.target

Đặt thuộc tính mục tiêu -

anchorObject.target = "_blank|_self|_parent|_top|framename"

Ví dụ

Hãy để chúng tôi xem một ví dụ về thuộc tính mục tiêu cố định -

<!DOCTYPE html>
<html>
<body>
<p><a id="Anchor" target="_self" href="https://www.examplesite.com">example site</a></p>
<p><a id="Anchor2" href="https://www.examplesite.com">example site</a></p>
<p>Click the button to see the value of the target attribute.</p>
<button onclick="getTarget1()">GetTarget</button>
<button onclick="setTarget2()">SetTarget</button>
<p id="Target1"></p>
<script>
   function getTarget1() {
      var x = document.getElementById("Anchor").target;
      document.getElementById("Target1").innerHTML = x;
   }
   function setTarget2(){
      document.getElementById("Anchor2").innerHTML="Target has been set";
      document.getElementById("Target1").target="newframe";
   }
</script>
</body>
</html>

Đầu ra

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

Thuộc tính mục tiêu HTML DOM Anchor

Sau khi nhấp vào nút “GetTarget” -

Thuộc tính mục tiêu HTML DOM Anchor

Sau khi nhấp vào nút “SetTarget” -

Thuộc tính mục tiêu HTML DOM Anchor

Trong ví dụ trên -

Chúng tôi đã sử dụng một thẻ liên kết với thuộc tính target và với giá trị _self và một thẻ khác có _blank -

mặc định

<p><a id="Anchor" target="_self" href="https://www.examplesite.com">example site</a></p>
<p><a id="Anchor2" href="https://www.examplesite.com">example site</a></p>

Sau đó, chúng tôi đã tạo hai nút có tên GetTarget và SetTarget để thực thi các hàm getTarget1 () và setTarget2 () tương ứng.

<button onclick="getTarget1()">GetTarget</button>
<button onclick="setTarget2()">SetTarget</button>

GetTarget1 () sẽ nhận giá trị mục tiêu từ liên kết đầu tiên và hiển thị trong thẻ đoạn có id =”Target1”. SetTarget2 () sẽ đặt giá trị mục tiêu của link2 từ _blank mặc định thành khung tùy chỉnh “newframe”.

function getTarget1() {
   var x = document.getElementById("Anchor").target;
   document.getElementById("Target1").innerHTML = x;
}
function setTarget2(){
   document.getElementById("Target1").innerHTML="Target has been set";
   document.getElementById("Anchor2").target="_blank";
}