The HTML | DOM Link rel Property in HTML DOM is used to set or return the value of the rel attribute of a linked document. The rel attribute is used to specify the relation between the current document and the linked document.
Syntax:
- It returns the rel property.
linkObject.rel
- It is used to set the rel property.
linkObject.rel = relationship
Property Values:
- alternate: It defines an alternate version of the document i.e. print page, translated or mirror.
- author: It defines the author of the document.
- dns-prefetch: It is used to specify that the browser should preemptively perform DNS resolution for the target resource’s origin
- help: It provides a help link.
- icon: It is used to import an icon to represent the document.
- license: It defines copyright information for the document.
- next: It provides a link to the next document in a selection.
- pingback: It is used to provides the address of pingback server which is used to handle pingbacks of the current document.
- preconnect: It is used to specifies that the browser should preemptively connect to the target resource’s origin.
- prefetch: It is used to specifies that the browser should preemptively fetch and cache the target resource, it is likely to be required for follow-up navigation
- preload: It is used to specify the browser agent must preemptively fetch and cache the target resource for current navigation according to the destination which is given by the “as” attribute.
- prev: It specify the previous document in a selection.
- search: It specify a link search through the document.
- stylesheet:It is to import the style sheet.
Return value : It returns a string value, which representing a space-separated list of relationship types
Example-1: This Example returns a rel Property.
HTML
<!DOCTYPE html><html>
<head>
<link id="linkid"
rel="stylesheet"
type="text/css"
href="styles.css"
sizes="16*16">
</head>
<body style="text-align:center;">
<h1>GeeksForGeeks</h1>
<h2>DOM Link rel Property</h2>
<button onclick="gfg()">Get URL
</button>
<p id="pid"
style="font-size:25px;
color:green;">
</p>
<script>
function gfg() {
// Return Link rel Property
var NEW = document.getElementById(
"linkid").rel;
document.getElementById(
"pid").innerHTML = NEW;
}
</script>
</body>
</html>
|
Output:
Before Clicking On Button :
After Clicking On Button :
Example-2: This Example sets the rel Property.
HTML
<!DOCTYPE html><html>
<head>
<link id="linkid"
rel="stylesheet"
type="text/css"
href="styles.css"
sizes="16*16">
</head>
<body style="text-align:center;">
<h1>GeeksForGeeks</h1>
<h2>DOM Link rel Property</h2>
<button onclick="gfg()">Get URL
</button>
<p id="pid"
style="font-size:25px;
color:green;">
</p>
<script>
function gfg() {
// Set Link rel Property
var NEW = document.getElementById(
"linkid").rel = "alternate";
document.getElementById(
"pid").innerHTML =
"The value of the rel attribute was changed to "
+ NEW;
}
</script>
</body>
</html>
|
Output :
Before Clicking On Button:
After Clicking On Button:
Supported Browsers:
- Google Chrome
- Mozilla Firefox
- Edge
- Safari
- Opera