Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Base target Property
The HTML DOM Base target property is associated with the HTML <base> element. It is used to set or return the value of the target attribute of the <base> element. The target attribute is used to specify where the hyperlink will open. It can open in the page itself or in a new page.
Properties
Following are the values for the target properties −
| Property Values | Description |
|---|---|
| _blank | To open link in new window. |
| _self | To open link in the same frame in which it was clicked. It I the default behaviour. |
| _parent | To open link in the parent frameset. |
| _top | To open link in the fully body of the window. |
| framename | To open link in the specified frame name. |
Syntax
Following is the syntax for −
Returning the target property −
baseObject.target
Setting the target property −
baseObject.target = "_blank|_self|_parent|_top|framename"
Example
Let us see an example for HTML DOM target property −
<!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>
Output
This will produce the following output −
On clicking GET TARGET −
On clicking SET TARGET −
In the above example −
We have first created two buttons GET TARGET and SET TARGET to execute functions getTarget() and setTarget() respectively −
<button onclick="getTarget()">GET TARGET</button> <button onclick="setTarget()">SET TARGET</button>
The getTarget() function gets the element with id “Base” which is the <base> element in our case. The base element target property is assigned to a variable x. The target property value is then displayed in the paragraph with id “Sample” using the innerHTML() property.
function getTarget() {
var x = document.getElementById("Base").target;
document.getElementById("Sample").innerHTML = "Base target for all links is: " + x;
}The setTarget() function gets the element with id “Base” which is the <base> element in our case. The target property of the <base> element is then set to “_blank” meaning it will open in new tab. The “Target has been changed from newframe1 to _blank” is then displayed in the paragraph with id “Sample” associated with it.
17 Views
