HTML | DOM Link rel Property
Last Updated :
22 Aug, 2022
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...