JavaScript Technique: Change Web Page External Style Sheet
Last reviewed/updated: 02 May 2016 | Published: 20 Apr 2014 | Status: Active
1. Introduction
Changing a web page external style sheet with JavaScript is a technique for dynamically changing the style of a web page. Some notes on this example:
- The HTML document specifies a default external style sheet. To not specify a default external style sheet, and to keep things as simple as possible, change HTML source code line 6 to
<link rel="stylesheet" type="text/css" id="linkElement" />
. Notice that thehref
attribute, which specifies the path/URI to an external style sheet file, has been removed. Because of this, the first time an external style sheet is selected, instead of it replacing an external style sheet, it is added as the external style sheet. After this initial difference, all subsequent external style sheet selections work exactly the same as if the original HTML source code was used the entire time. - The HTML document default external style sheet is also one of the external style sheet choices. This allows the web page to return to the default/initial styles after selecting a different external style sheet. To not have the HTML document default external style sheet as one of the external style sheet choices, in HTML source code line 11, either remove the code for the first interactive object, or edit the code for the first interactive object to pass the path of a different external style sheet.
- There are two external style sheet choices. To add external style sheet choices, create the external style sheets, and, in HTML source code line 11, create an interactive object for each external style sheet.
- The HTML
link
elementhref
attribute, and the JavaScriptHTMLLinkElement
objecthref
property, indicate the path/URI to an external style sheet file. The HTMLlink
elementhref
attribute is exposed on the DOM as the JavaScriptHTMLLinkElement
objecthref
property. The JavaScriptHTMLLinkElement
objecthref
property gets/sets the HTMLlink
elementhref
attribute value from/on the DOM. Specifically, assigning the JavaScriptHTMLLinkElement
objecthref
property to a JavaScript variable gets the HTMLlink
elementhref
attribute value from the DOM, and assigning a value to the JavaScriptHTMLLinkElement
objecthref
property sets the HTMLlink
elementhref
attribute value on the DOM. - In JavaScript source code line 4, the
pathToExtSS
value is assigned to thelinkElementReference.href
property, which sets thepathToExtSS
value as the path/URI to the external style sheet. This changes the web page external style sheet to the external style sheet located at thepathToExtSS
value. When this occurs, the web browser automatically and immediately applies the styles of the new external style sheet, not the styles of the old external style sheet, to the web page. In other words, the styles of the old external style sheet are not removed, not overwritten, nor are they merged. Instead, the web page is re-rendered from scratch using only the new external style sheet, not the old external style sheet.
1.1. Demonstration
Demonstration: JavaScript Technique: Change Web Page External Style Sheet (learnwebcoding.com).
1.2. Web Browser Support
Web browser support: IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.
1.3. How To Try This Example On Your Computer
To try this example on your computer:
- Download the following source files to the same drive or folder on your computer:
- Double click the .html file.
1.4. Abbreviations
- IE = Internet Explorer.
- ED = Edge Legacy 12 - 18 (EdgeHTML based) and Edge 79+ (Chromium based).
- FF = Firefox.
- SF = Safari.
- CH = Chrome.
- OP = Opera.
2. Change Web Page External Style Sheet
2.1. HTML Source Code And Notes
HTML source code: change_ext_ss.html (learnwebcoding.com):
<!DOCTYPE html> <html lang="en"> <head> <title>JavaScript Technique: Change Web Page External Style Sheet</title> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="change_ext_ss_1.css" id="linkElement" /> <script src="change_ext_ss.js"></script> </head> <body> <h2>JavaScript Technique: Change Web Page External Style Sheet</h2> <p><span onclick="ChangeExtSSUtil.changeExtSS('change_ext_ss_1.css')" class="interactive-object">Use External Style Sheet One (default)</span> | <span onclick="ChangeExtSSUtil.changeExtSS('change_ext_ss_2.css')" class="interactive-object">Use External Style Sheet Two</span></p> <p>Web browser support: IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.</p> </body> </html>
HTML source code notes:
- Line 6: The
link
elementhref
attribute specifies the path/URI to an external style sheet file. Specifically, the value assigned to thelink
elementhref
attribute is the path/URI to an external style sheet file. In this example, thelink
elementhref
attribute is assigned thechange_ext_ss_1.css
value. This makes change_ext_ss_1.css the default external style sheet for the HTML document. - Line 6: An element
id
attribute specifies a selector that serves as a unique identifier for the element. Specifically, the value assigned to the elementid
attribute is the element unique identifier. In this example, thelink
elementid
attribute is assigned thelinkElement
value. Therefore,linkElement
is thelink
element unique identifier. - Line 11: Creates two interactive objects that look and behave like hyperlinks, but are styled text.
Hyperlinks can be used instead of interactive objects. However, when not navigating to a different path/URI upon the click event (as in this example), using interactive objects instead of hyperlinks avoids, among other things, unnecessarily triggering the web browser window status bar, which keeps the web browser window interface clean.
- Line 11: The
span
elementonclick
attribute assigns/registers an event handler for thespan
elementclick
event. Specifically, the value assigned to thespan
elementonclick
attribute is the event handler for thespan
elementclick
event. In this example, for both interactive objects, thespan
elementonclick
attribute is assigned theChangeExtSSUtil.changeExtSS()
value. Therefore, for both interactive objects, theChangeExtSSUtil.changeExtSS()
method is the event handler for thespan
elementclick
event. - Line 11: Clicking either interactive object calls the
ChangeExtSSUtil.changeExtSS()
method and passes it a value. The value passed into theChangeExtSSUtil.changeExtSS()
method specifies the path/URI to an external style sheet file. If the External Style Sheet One (default) interactive object is clicked, thechange_ext_ss_1.css
value is passed. If the External Style Sheet Two interactive object is clicked, thechange_ext_ss_2.css
value is passed.
2.2. CSS Source Code And Notes
CSS source code: change_ext_ss_1.css (learnwebcoding.com):
body { font-size: 16px; background-color: #ddd; } .interactive-object { text-decoration: underline; } .interactive-object:visited { color: #999; } .interactive-object:hover { color: #999; cursor: pointer; }
CSS source code: change_ext_ss_2.css (learnwebcoding.com):
body { font-size: 20px; color: #00f; } .interactive-object { text-decoration: underline; } .interactive-object:visited { color: #999; } .interactive-object:hover { color: #999; cursor: pointer; } p { font-style: italic; }
CSS source code notes:
- Lines 5 - 14 both .css files: Styles the interactive objects.
- Lines 1 - 4 both .css files and lines 15 - 17 change_ext_ss_2.css: Demonstrates that when a web page external style sheet is changed, the web page is re-rendered from scratch using only the new external style sheet, not the old external style sheet.
2.3. JavaScript Source Code And Notes
JavaScript source code: change_ext_ss.js (learnwebcoding.com):
var ChangeExtSSUtil = { changeExtSS: function(pathToExtSS){ var linkElementReference = document.getElementById("linkElement"); linkElementReference.href = pathToExtSS; } };
JavaScript source code notes:
- Line 1: Defines
ChangeExtSSUtil
as an object literal. - Line 2: Defines the
changeExtSS()
function as a method of theChangeExtSSUtil
object. - Line 2: Defines
pathToExtSS
as an argument of theChangeExtSSUtil.changeExtSS()
method. The value passed into theChangeExtSSUtil.changeExtSS()
method is assigned topathToExtSS
.pathToExtSS
is a local variable. - Line 3: Gets a reference to the element with the
id="linkElement"
attribute, and assigns the reference (in this example, anHTMLLinkElement
object) tolinkElementReference
.linkElementReference
is a local variable. - Line 4: Assigns the
pathToExtSS
value to thelinkElementReference.href
property, which sets thepathToExtSS
value as the path/URI to the external style sheet. This changes the web page existing external style sheet to the external style sheet located at thepathToExtSS
value.