Dynamically Load a Style Sheet

Dynamically Load a Style Sheet


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.


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:


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.

See also  How to Block Websites During Certain Hours on a Mac Computer

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist