Teach with us

HTML DOM Anchor type Property

The HTML DOM type property associated with anchor tag is used to set or get the value of the type attribute of the link. This attribute was introduced in HTML 5. This attribute is also for only suggestive reasons and isn’t compulsory to include. It contains single MIME(Multipurpose Internet Mail Extensions) value type.

Syntax

Following is the syntax for −

Returning the type property −

anchorObject.type

Setting the type property −

anchorObject.type = MIME-type

Example

Let us see an example for anchor text property −

 Live Demo

<!DOCTYPE html>
<html>
<body>
<p><a id="Anchor" type="text/html" href="https://www.examplesite.com">example site</a></p>
<p><a id="Anchor2" href="https://www.example.com">example</a></p>
<p>Click the buttons to set and get the type attribute.</p>
<button onclick="getType1()">GetType</button>
<button onclick="setType2()">SetType</button>
<p id="Type1"></p>
<script>
   function getType1() {
      var x = document.getElementById("Anchor").type;
      document.getElementById("Type1").innerHTML = x;
   }
   function setType2(){
      document.getElementById("Type1").innerHTML="Type has been set";
      document.getElementById("Anchor2").type="text/html";
   }
</script>
</body>
</html>

Output

This will produce the following output −

On clicking GetType button −

On clicking SetType button −

In the above example −

We have taken two links with id Anchor and Anchor2 respectively. Anchor1 has MIME type text/html associated with it while Anchor2 doesn’t have any MIME type associated with it.

<p><a id="Anchor" type="text/html" href="https://www.examplesite.com">example site</a></p>
<p><a id="Anchor2" href="https://www.example.com">example</a></p>

We then have two buttons GetType and SetType to execute functions getType1() and getType2() respectively.

<button onclick="getType1()">GetType</button>
<button onclick="setType2()">SetType</button>

The getType1() function returns the type of the anchor tag with id “Anchor” associated with it. The setType2() function sets the type of the anchor tag with id “Anchor2” to text/html.

function getType1() {
   var x = document.getElementById("Anchor").type;
   document.getElementById("Type1").innerHTML = x;
}
function setType2(){
   document.getElementById("Type1").innerHTML="Type has been set";
   document.getElementById("Anchor2").type="text/html";
}
Updated on 20-Feb-2021 06:31:24

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements