JavaScript Technique: Change Web Page External Style Sheet

Last reviewed/updated: 02 May 2016 | Published: 20 Apr 2014 | Status: Active
Web browser support: Internet Explorer 10+, Edge 12+, Firefox 6+, Chrome 30+, Opera 17+

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 the href 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 element href attribute, and the JavaScript HTMLLinkElement object href property, indicate the path/URI to an external style sheet file. The HTML link element href attribute is exposed on the DOM as the JavaScript HTMLLinkElement object href property. The JavaScript HTMLLinkElement object href property gets/sets the HTML link element href attribute value from/on the DOM. Specifically, assigning the JavaScript HTMLLinkElement object href property to a JavaScript variable gets the HTML link element href attribute value from the DOM, and assigning a value to the JavaScript HTMLLinkElement object href property sets the HTML link element href attribute value on the DOM.
  • In JavaScript source code line 4, the pathToExtSS value is assigned to the linkElementReference.href property, which sets the pathToExtSS 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 the pathToExtSS 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:

  1. Download the following source files to the same drive or folder on your computer:
  2. Double click the .html file.

1.4. Abbreviations

  • IE = Internet Explorer.
  • ED = Edge = EdgeHTML rendering engine (ED12+) and/or Edge browser (ED20+).
  • 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):

1     <!DOCTYPE html>
2     <html lang="en">
3      <head>
4       <title>JavaScript Technique: Change Web Page External Style Sheet</title>
5       <meta charset="UTF-8" />
6       <link rel="stylesheet" type="text/css" href="change_ext_ss_1.css" id="linkElement" />
7       <script src="change_ext_ss.js"></script>
8      </head>
9      <body>
10      <h2>JavaScript Technique: Change Web Page External Style Sheet</h2>
11      <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>
12      <p>Web browser support: IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.</p>
13     </body>
14    </html>

HTML source code notes:

  • Line 6: The link element href attribute specifies the path/URI to an external style sheet file. Specifically, the value assigned to the link element href attribute is the path/URI to an external style sheet file. In this example, the link element href attribute is assigned the change_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 element id attribute is the element unique identifier. In this example, the link element id attribute is assigned the linkElement value. Therefore, linkElement is the link 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 element onclick attribute assigns/registers an event handler for the span element click event. Specifically, the value assigned to the span element onclick attribute is the event handler for the span element click event. In this example, for both interactive objects, the span element onclick attribute is assigned the ChangeExtSSUtil.changeExtSS() value. Therefore, for both interactive objects, the ChangeExtSSUtil.changeExtSS() method is the event handler for the span element click event.
  • Line 11: Clicking either interactive object calls the ChangeExtSSUtil.changeExtSS() method and passes it a value. The value passed into the ChangeExtSSUtil.changeExtSS() method specifies the path/URI to an external style sheet file. If the External Style Sheet One (default) interactive object is clicked, the change_ext_ss_1.css value is passed. If the External Style Sheet Two interactive object is clicked, the change_ext_ss_2.css value is passed.

2.2. CSS Source Code And Notes

CSS source code: change_ext_ss_1.css (learnwebcoding.com):

1     body {
2       font-size: 16px;
3       background-color: #ddd;
4     }
5     .interactive-object {
6       text-decoration: underline;
7     }
8     .interactive-object:visited {
9       color: #999;
10    }
11    .interactive-object:hover {
12      color: #999;
13      cursor: pointer;
14    }

CSS source code: change_ext_ss_2.css (learnwebcoding.com):

1     body {
2       font-size: 20px;
3       color: #00f;
4     }
5     .interactive-object {
6       text-decoration: underline;
7     }
8     .interactive-object:visited {
9       color: #999;
10    }
11    .interactive-object:hover {
12      color: #999;
13      cursor: pointer;
14    }
15    p {
16      font-style: italic;
17    }

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):

1    var ChangeExtSSUtil = {
2     changeExtSS: function(pathToExtSS){
3      var linkElementReference = document.getElementById("linkElement");
4      linkElementReference.href = pathToExtSS;
5     }
6    };

JavaScript source code notes:

  • Line 1: Defines ChangeExtSSUtil as an object literal.
  • Line 2: Defines the changeExtSS() function as a method of the ChangeExtSSUtil object.
  • Line 2: Defines pathToExtSS as an argument of the ChangeExtSSUtil.changeExtSS() method. The value passed into the ChangeExtSSUtil.changeExtSS() method is assigned to pathToExtSS. 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, an HTMLLinkElement object) to linkElementReference. linkElementReference is a local variable.
  • Line 4: Assigns the pathToExtSS value to the linkElementReference.href property, which sets the pathToExtSS 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 the pathToExtSS value.

3. Resources And Additional Information