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 href Property
The HTML DOM Link href property is used to set or return the URL/path of a linked document. This property is commonly used with <link> elements to dynamically change stylesheets, favicons, or other linked resources on a webpage.
Syntax
Following is the syntax for getting the href attribute value −
linkObject.href
Following is the syntax for setting the href attribute value −
linkObject.href = string
Parameters
The string parameter can be the following values −
| Value Type | Description |
|---|---|
| Absolute path | It defines the complete URL path to a document (e.g., https://example.com/style.css). |
| Relative path | It defines the path relative to the current document (e.g., ./css/style.css). |
| URL | It defines the web address of the document to be linked. |
Return Value
The href property returns a string representing the URL of the linked document. If no href is set, it returns an empty string.
Example − Getting Link href Value
Following example demonstrates how to retrieve the href value of a link element −
<!DOCTYPE html>
<html>
<head>
<title>Getting Link href Property</title>
<link id="myLink" rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Link href Property Example</h2>
<button onclick="showHref()">Show Current Stylesheet</button>
<p id="result"></p>
<script>
function showHref() {
var link = document.getElementById("myLink");
var hrefValue = link.href;
document.getElementById("result").innerHTML = "Current stylesheet: " + hrefValue;
}
</script>
</body>
</html>
The output displays the full URL path of the linked stylesheet −
Current stylesheet: file:///css/main.css
Example − Changing Stylesheets Dynamically
Following example shows how to change stylesheets dynamically using the href property −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Stylesheet Changing</title>
<style>
/* Default styles */
.theme-light {
background-color: white;
color: black;
padding: 20px;
border-radius: 8px;
}
.theme-dark {
background-color: #333;
color: white;
padding: 20px;
border-radius: 8px;
}
button {
padding: 10px 15px;
margin: 5px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
<link id="themeLink" rel="stylesheet" type="text/css" href="">
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div id="content" class="theme-light">
<h2>Dynamic Theme Switcher</h2>
<p>Click the buttons below to switch between light and dark themes.</p>
<button onclick="setLightTheme()">Light Theme</button>
<button onclick="setDarkTheme()">Dark Theme</button>
<p id="currentTheme">Current theme: Light</p>
</div>
<script>
var themeLink = document.getElementById("themeLink");
var content = document.getElementById("content");
var themeDisplay = document.getElementById("currentTheme");
function setLightTheme() {
content.className = "theme-light";
themeDisplay.textContent = "Current theme: Light";
}
function setDarkTheme() {
content.className = "theme-dark";
themeDisplay.textContent = "Current theme: Dark";
}
</script>
</body>
</html>
The buttons allow users to switch between light and dark themes by changing the CSS class −
Dynamic Theme Switcher Click the buttons below to switch between light and dark themes. [Light Theme] [Dark Theme] Current theme: Light
Example − Loading External Stylesheets
Following example demonstrates loading external stylesheets using the href property −
<!DOCTYPE html>
<html>
<head>
<title>External Stylesheet Loading</title>
<link id="externalStyle" rel="stylesheet" type="text/css" href="">
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>External Stylesheet Demo</h2>
<div id="styledBox" style="padding: 20px; border: 2px solid #ccc; margin: 10px 0;">
<p>This box will change appearance when different stylesheets are loaded.</p>
</div>
<button onclick="loadBootstrap()">Load Bootstrap Style</button>
<button onclick="loadCustom()">Load Custom Style</button>
<button onclick="removeStyle()">Remove External Style</button>
<p id="status">No external stylesheet loaded.</p>
<script>
var styleLink = document.getElementById("externalStyle");
var status = document.getElementById("status");
function loadBootstrap() {
styleLink.href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css";
status.textContent = "Bootstrap stylesheet loaded: " + styleLink.href;
}
function loadCustom() {
// This would load a custom stylesheet (example path)
styleLink.href = "/css/custom-theme.css";
status.textContent = "Custom stylesheet loaded: " + styleLink.href;
}
function removeStyle() {
styleLink.href = "";
status.textContent = "External stylesheet removed.";
}
</script>
</body>
</html>
This example shows how to dynamically load different external stylesheets and display the current href value −
External Stylesheet Demo [This box will change appearance when different stylesheets are loaded.] [Load Bootstrap Style] [Load Custom Style] [Remove External Style] No external stylesheet loaded.
Common Use Cases
The Link href property is commonly used for the following purposes −
Theme switching − Dynamically changing between different CSS themes or color schemes.
Responsive design − Loading different stylesheets based on device type or screen size.
User preferences − Allowing users to customize the appearance of a website.
A/B testing − Testing different visual designs by swapping stylesheets.
Dynamic favicon − Changing the site icon based on user actions or notifications.
Browser Compatibility
The Link href property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. It provides consistent behavior across different platforms and devices.
Conclusion
The HTML DOM Link href property provides a powerful way to dynamically control linked resources like stylesheets and icons. It allows developers to create interactive themes, load external resources conditionally, and enhance user experience through dynamic styling. The property works consistently across all modern browsers and is essential for creating flexible, user-customizable web applications.
317 Views
