Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


Tip of the Day
Language: DHTML
Expertise: Beginner
May 12, 1999

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.

DevX Pro
 
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap