คุณสมบัติเป้าหมายพื้นฐานของ HTML DOM

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

คุณสมบัติ

ต่อไปนี้เป็นค่าสำหรับคุณสมบัติเป้าหมาย -

ค่าคุณสมบัติ	คำอธิบาย
_blank	หากต้องการเปิดลิงก์ในหน้าต่างใหม่
_ตัวเอง	หากต้องการเปิดลิงก์ในเฟรมเดียวกันกับที่มีการคลิก มันเป็นพฤติกรรมเริ่มต้น
_parent	หากต้องการเปิดลิงก์ในเฟรมเซ็ตหลัก
_top	หากต้องการเปิดลิงก์ในเนื้อหาแบบเต็มของหน้าต่าง
ชื่อเฟรม	หากต้องการเปิดลิงก์ในชื่อเฟรมที่ระบุ

ไวยากรณ์

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

ส่งคืนคุณสมบัติเป้าหมาย -

baseObject.target

การตั้งค่าคุณสมบัติเป้าหมาย -

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

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<head>
<base id="Base" target="newframe1" href="https://www.example.com">
</head>
<body>
<p>Click the below button to get the target attribute value</p>
<button onclick="getTarget()">GET TARGET</button>
<p>Click the below button to set the target attribute value</p>
<button onclick="setTarget()">SET TARGET</button>
<p id="Sample"></p>
<script>
   function getTarget() {
      var x = document.getElementById("Base").target;
      document.getElementById("Sample").innerHTML = "Base target for all links is: " + x;
   }
   function setTarget(){
      document.getElementById("Base").target="_blank"
      document.getElementById("Sample").innerHTML="Target has been changed from
      newframe1 to _blank"
   }
</script>
</body>
</html>

ผลลัพธ์

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

คุณสมบัติเป้าหมายพื้นฐานของ HTML DOM

เมื่อคลิก GET TARGET -

คุณสมบัติเป้าหมายพื้นฐานของ HTML DOM

เมื่อคลิกตั้งเป้าหมาย -

คุณสมบัติเป้าหมายพื้นฐานของ HTML DOM

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

ขั้นแรกเราได้สร้างปุ่มสองปุ่ม GET TARGET และ SET TARGET เพื่อใช้งานฟังก์ชั่น getTarget() และ setTarget() ตามลำดับ -

<button onclick="getTarget()">GET TARGET</button>
<button onclick="setTarget()">SET TARGET</button>

ฟังก์ชัน getTarget() รับองค์ประกอบที่มี id “Base” ซึ่งเป็นองค์ประกอบ ในกรณีของเรา คุณสมบัติเป้าหมายขององค์ประกอบฐานถูกกำหนดให้กับตัวแปร x ค่าคุณสมบัติเป้าหมายจะแสดงในย่อหน้าด้วย id “Sample” โดยใช้คุณสมบัติ innerHTML()

function getTarget() {
   var x = document.getElementById("Base").target;
   document.getElementById("Sample").innerHTML = "Base target for all links is: " + x;
}

ฟังก์ชัน setTarget() รับองค์ประกอบที่มี id “Base” ซึ่งเป็นองค์ประกอบ ในกรณีของเรา คุณสมบัติเป้าหมายขององค์ประกอบ ถูกตั้งค่าเป็น "_blank" ซึ่งหมายความว่าจะเปิดขึ้นในแท็บใหม่ จากนั้น “เป้าหมายถูกเปลี่ยนจาก newframe1 เป็น _blank” จะแสดงในย่อหน้าที่มี ID “Sample” เชื่อมโยงอยู่