Javascript Reference - HTML DOM Link Object








The Link object represents an HTML <link> element.

Example

We can access a <link> element by using getElementById().


<!DOCTYPE html>
<html>
<head>
<link id="myLink" rel="stylesheet" type="text/css" href="styles.css">
</head><!-- ww w  .  j a v  a 2s.  c  o m-->
<body>
<button onclick="myFunction()">test</button>
<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myLink").href;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:





Example 2

We can create a <link> element by using the document.createElement() method.


<!DOCTYPE html>
<html>
<head>
</head><!--from  ww  w. j a v a2  s. c o m-->
<body>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
    var x = document.createElement("LINK");
    x.setAttribute("rel", "stylesheet");
    x.setAttribute("type", "text/css");
    x.setAttribute("href", "styles.css");
    document.head.appendChild(x);
}
</script>

</body>
</html>

The code above is rendered as follows:





Property Description
charset Not supported in HTML5.
Sets or gets the character encoding of the linked document
crossOrigin Sets or gets the the CORS settings of the linked document
disabled Disable or enable the linked document
href Sets or gets the URL of the linked document
hreflang Sets or gets the language code of the linked document
media Sets or gets the media type for the link element
rel Sets or gets the relationship between the current document and the linked document
rev Not supported in HTML5.
Sets or gets the reverse relationship from the linked document to the current document
sizes Returns the sizes attribute of the linked resource
type Sets or gets the content type of the linked document

Standard Properties and Events

The Link object supports the standard properties and events.