Using a select element to change the active stylesheet for a web page.

This article discusses the use of a select element to change the active stylesheet for a web page. It also provides step by step instructions on how to create the select element.

  • Add a link element to the head of your web page. Set the rel attribute to “stylesheet,” the href attribute to the URL of the default stylesheet you wish to use for your web page, and the id attribute to a unique value.

    Code Example:

    <link
      rel="stylesheet"
      href="https://www.w3.org/StyleSheets/Core/Swiss"
      id="W3C-Core-Styles" />
    

  • Add the select element. Set the value attribue of each option element to the URL of the stylesheet and the contents of each option element to the text you wish to be displayed for the combo box.

    Code Example:

    <select id="SeclectW3CCoreStyle">
    <option
      value="https://www.w3.org/StyleSheets/Core/Chocolate">
    Chocolate
    </option>
    <option
      value="https://www.w3.org/StyleSheets/Core/Midnight">
    Midnight
    </option>
    <option
      value="https://www.w3.org/StyleSheets/Core/Modernist">
    Modernist
    </option>
    <option
      value="https://www.w3.org/StyleSheets/Core/Oldstyle">
    Oldstyle
    </option>
    <option
      value="https://www.w3.org/StyleSheets/Core/Steely">
    Steely
    </option>
    <option
      value="https://www.w3.org/StyleSheets/Core/Swiss">
    Swiss
    </option>
    <option
      value="https://www.w3.org/StyleSheets/Core/Traditional">
    Traditional
    </option>
    <option
      value="https://www.w3.org/StyleSheets/Core/Ultramarine">
    Ultramarine
    </option>
    </select>
    

    Typically, I add this select element, along with a lable and the Set Style button, to the footer at the bottom of the page.

  • Add a Set Style button, as follows.

    Code Example:

    <input
      id="SetW3CCoreStyleButton"
      onclick="SetStyle('SeclectW3CCoreStyle', 'W3C-Core-Styles')"
      type="button"
      value="Set Style" />
    

  • Add the following JavaScript code to a script element in your page or to a .js file on your website.

    function isEmptyOrSpaces(str){
      if (str == null){
        return true;
      }
      if (str.length == 0){
        return true;
      }
      if (str.trim() === ''){
        return true;
      }
      return false;
    }
    
    function SetStyle(selectStyleElementId, linkElementId){
      console.log(
        "SetStyle('" + selectStyleElementId
        + "', '" + linkElementId
        + "') called.");
      let seclectStyleElement =  document.getElementById
        selectStyleElementId);
      if (!seclectStyleElement){
        console.log(
          "Could not find the '" + selectStyleElementId
          + "' element.");
        return false;
      }
      let seclectedStyle = seclectStyleElement.value;
      if (isEmptyOrSpaces(seclectedStyle)){
        console.log("Could not get the selected style.");
        return false;
      }
      let linkElement = document.getElementById(linkElementId);
      if (!linkElement){
        console.log(
          "Could not find the '" + linkElementId
          + "' element.");
        return false;
      }
      linkElement.setAttribute("href", seclectedStyle);
      return true;
    }
    

This example is fully functional. It does lack one key feature, the ability to store the selected style in a cookie. The article Store and Retrieve Cookies demonstrates the use of the localStorage.setItem and localStorage.getItem functions.

Modify the SetStyle function by adding the folloing line just above the ‘return true;’ line at the bottom of the function.


window.localStorage.setItem(
  "SeclectedStyle", seclectedStyle);

Note that the localStorage object is only supported on modern web browsers. That said, the Local storage with Window.localStorage page provides JavaScript code to emulate the feature for older browsers.

The next step is to set the style and the selected item in the select element when the web page loads. To acomplish this you need to add the following function.


function SetStyleFromCookie(selectStyleElementId, linkElementId){
  console.log(
    "SetStyleFromCookie('" + selectStyleElementId + "', '" + linkElementId + "') called.");
  let seclectedStyle = window.localStorage.getItem(
    "SeclectedStyle");
  if (isEmptyOrSpaces(seclectedStyle)){
    console.log(
      "Failed to get the value of the 'SeclectedStyle' cookie. Using the default value.");
    seclectedStyle = 'https://www.w3.org/StyleSheets/Core/Swiss';
  }
  let linkElement = document.getElementById(linkElementId);
  if (!linkElement){
    console.log("Could not find the '" + linkElementId + "' element.");
    return false;
  }
  linkElement.setAttribute("href", seclectedStyle);
  let seclectStyleElement =  document.getElementById(selectStyleElementId);
  if (!seclectStyleElement){
    console.log("Could not find the '" + selectStyleElementId + "' element.");
    return false;
  }
  seclectStyleElement.value = seclectedStyle;
  return true;
}

Finally, use the following code to call the SetStyleFromCookie function when the web page is loaded.


window.addEventListener('DOMContentLoaded', (event) => {
  SetStyleFromCookie('SeclectW3CCoreStyle', 'W3C-Core-Styles');
});

References

To see this code in action, go to Using a select element to change the active stylesheet for a web page.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.