Dynamically Load a Style Sheet

Question:

How do you dynamically load a style sheet? I’m trying to use the tag in the to load a style sheet. All the pages in my site use the same so I get a uniform appearance throughout. I want to let users choose which style sheet to use, with a simple form box, and have the SRC attribute of the tag in each page changed to whatever style sheet they choose. I’ve tried various things with JavaScript and cookies, but I can’t figure it out. Is it even possible? I’m designing for Internet Explorer 4 and Netscape 4.

Answer:

Trying to develop for both Netscape and IE can be frustrating at best. One solution is to make use of a query string to pass the style sheet location, then build the link statement dynamically:

	

The getQueryValue function returns the result of a token in a query string. In the example, the query string includes the token cssfile, which contains the path to the style sheet. You can set this value using a select/option list with the names being titles for each of the style sheets, and the values being the actual file references:

When sent as a GET, the name of the select tag ("cssfile") becomes one token in a queryString:

nextPage?cssfile=deepBlue.css

A similar method could be done using cookies?retrieve the cookie, parse out its value, then use document.write() to create the LINK tag in the HTML code. If you have access to server-side code like ASP or Perl, you can send this information in a form once then store it on the server until the value changes or the session ends.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

The Latest

your company's audio

4 Areas of Your Company Where Your Audio Really Matters

Your company probably relies on audio more than you realize. Whether you’re creating a spoken text message to a colleague or giving a speech, you want your audio to shine. Otherwise, you could cause avoidable friction points and potentially hurt your brand reputation. For example, let’s say you create a

chrome os developer mode

How to Turn on Chrome OS Developer Mode

Google’s Chrome OS is a popular operating system that is widely used on Chromebooks and other devices. While it is designed to be simple and user-friendly, there are times when users may want to access additional features and functionality. One way to do this is by turning on Chrome OS

homes in the real estate industry

Exploring the Latest Tech Trends Impacting the Real Estate Industry

The real estate industry is changing thanks to the newest technological advancements. These new developments — from blockchain and AI to virtual reality and 3D printing — are poised to change how we buy and sell homes. Real estate brokers, buyers, sellers, wholesale real estate professionals, fix and flippers, and beyond may