HTML DOM Link Object is used to access HTML <link> element.
Syntax:
- To Access a HTML element:
document.getElementById("myLink"); - To Create a New HTML element:
document.createElement("LINK");
Property Values:
| Value | Description |
|---|---|
| charset | It assigns the character encoding of the linked document |
| crossOrigin | It assigns the the CORS settings of the linked document |
| disabled | It assigns whether the linked document is disabled, or not |
| href | It is used to set/return the URL of the linked document |
| hreflang | It assigns the language code of the linked document |
| media | It assigns the media type for the link element |
| rel | It assigns the relationship between the current document and the linked document |
| rev | It assigns the reverse relationship from the linked document to the current document |
| sizes | Returns the sizes attribute's value of the linked resource |
| type | It is used to set/return the content type of the linked document |
Example-1: Accessing link element.
<!DOCTYPE html>
<html>
<head>
<link id="linkid"
rel="stylesheet"
type="text/css"
href="styles.css">
</head>
<body>
<h1>TO ACCESS LINK ELEMENT:</h1>
<p>PRESS THE BUTTON TO GET THE URL
OF THE LINKED DOCUMENT.</p>
<button onclick="gfg()">Get URL
</button>
<p id="pid"></p>
<script>
function gfg() {
// Access link element.
var NEW = document.getElementById(
"linkid").href;
document.getElementById(
"pid").innerHTML = NEW;
}
</script>
</body>
</html>
Output:
Before clicking:
After clicking:
Example-2: Create link element.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>TO CREATE A LINK ELEMENT.</h1>
<button onclick="myFunction()">Create</button>
<p id="pid"></p>
<script>
function myFunction() {
// Create link element.
var NEW = document.createElement(
"LINK");
// set attributes.
NEW.setAttribute("id", "linkid");
NEW.setAttribute("rel", "stylesheet");
NEW.setAttribute("type", "text/css");
NEW.setAttribute("href", "styles.css");
document.head.appendChild(NEW);
var NEW1 = document.getElementById(
"linkid").href;
document.getElementById("pid").innerHTML =
NEW1;
}
</script>
</body>
</html>
Output:
Before clicking:
After clicking:
Supported Browsers:
- Chrome
- Firefox
- Internet Explorer
- Safari
- Opera