Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Link type Property
The HTML DOM Link type property sets or returns the MIME type of a linked document. This property corresponds to the type attribute of HTML <link> elements and helps browsers understand how to handle the linked resource.
Syntax
Following is the syntax for getting the type property −
linkObject.type
Following is the syntax for setting the type property −
linkObject.type = value
Parameters
The value parameter represents a string specifying the MIME type of the linked document. Common valid values include −
text/css− For CSS stylesheetstext/javascript− For JavaScript filesimage/x-icon− For favicon filesapplication/rss+xml− For RSS feedsapplication/atom+xml− For Atom feeds
Return Value
The property returns a string representing the MIME type of the linked document. If no type is specified, it returns an empty string.
Example − Getting and Setting Link Type
Following example demonstrates how to get and modify the type property of a link element −
<!DOCTYPE html>
<html>
<head>
<title>Link Type Property</title>
<link id="extStyle" rel="stylesheet" href="styles.css" type="myStyle">
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
}
fieldset {
padding: 20px;
border: 2px solid #ccc;
border-radius: 8px;
}
input[type="button"] {
padding: 10px 20px;
border-radius: 10px;
border: 1px solid #007bff;
background-color: #007bff;
color: white;
cursor: pointer;
margin: 10px;
}
input[type="button"]:hover {
background-color: #0056b3;
}
#divDisplay {
margin-top: 15px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f8f9fa;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Link Type Property Demo</legend>
<input type="button" value="Show Current Type" onclick="showCurrentType()">
<input type="button" value="Correct Type" onclick="correctType()">
<div id="divDisplay">Click a button to see the link type</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var extStyle = document.getElementById("extStyle");
function showCurrentType() {
divDisplay.textContent = 'Current linked document type: "' + extStyle.type + '"';
}
function correctType() {
extStyle.type = 'text/css';
divDisplay.textContent = 'Updated! The linked document type is now: "' + extStyle.type + '"';
}
</script>
</body>
</html>
The output shows the current type value and allows changing it to the correct CSS MIME type −
Before clicking: Click a button to see the link type After "Show Current Type": Current linked document type: "myStyle" After "Correct Type": Updated! The linked document type is now: "text/css"
Example − Multiple Link Types
Following example demonstrates working with multiple link elements and their types −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Link Types</title>
<link id="stylesheet" rel="stylesheet" href="styles.css" type="text/css">
<link id="favicon" rel="icon" href="favicon.ico" type="image/x-icon">
<link id="rss" rel="alternate" href="feed.xml" type="application/rss+xml">
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
button {
padding: 8px 16px;
margin: 5px;
border: 1px solid #007bff;
background-color: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#output {
margin-top: 15px;
padding: 10px;
background-color: #e9ecef;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<h2>Link Type Properties</h2>
<button onclick="showAllTypes()">Show All Link Types</button>
<button onclick="updateStyleType()">Update Stylesheet Type</button>
<div id="output">Click a button to see link types</div>
</div>
<script>
function showAllTypes() {
var stylesheet = document.getElementById("stylesheet");
var favicon = document.getElementById("favicon");
var rss = document.getElementById("rss");
var output = document.getElementById("output");
output.innerHTML =
"<strong>Current Link Types:</strong><br>" +
"Stylesheet: " + stylesheet.type + "<br>" +
"Favicon: " + favicon.type + "<br>" +
"RSS Feed: " + rss.type;
}
function updateStyleType() {
var stylesheet = document.getElementById("stylesheet");
stylesheet.type = "text/plain";
document.getElementById("output").innerHTML =
"Stylesheet type changed to: <strong>" + stylesheet.type + "</strong>";
}
</script>
</body>
</html>
This example displays the types of different link elements and demonstrates modifying them −
Current Link Types: Stylesheet: text/css Favicon: image/x-icon RSS Feed: application/rss+xml
Browser Compatibility
The Link type property is supported in all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. The property has been part of the DOM specification since early versions and provides consistent behavior across platforms.
Key Points
The type property reflects the
typeattribute of HTML<link>elementsSetting an incorrect MIME type may cause browsers to handle resources improperly
For CSS files, always use
text/cssas the type valueThe property returns an empty string if no type attribute is specified
Changes to the type property take effect immediately in the DOM
Conclusion
The HTML DOM Link type property provides a way to get and set the MIME type of linked documents. It ensures browsers correctly interpret linked resources like stylesheets, scripts, and feeds. Always use appropriate MIME types like text/css for stylesheets to ensure proper resource handling.
168 Views
