SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Cambridge, England
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing external CSS using JavaScript

    I am looking at ways of altering the appearance of web pages by calling alternate external stylesheets. This has obvious use in catering for accessibility issues.

    There are existing sites that offer the facility to change font size, font colour, background colour, but these use server-side code. I would like to do this using client-side code, because I want to intergrate this with an HTML-based virtual learning environment (VLE) that is unlikely to accept server-side code.

    I have got off to a very shaky start in the following file:

    http://www.step-up-to-science.com/CS...ange_bg_1.html

    I can obviously call a second stylesheet, which overrides that called in the <head> part of the HTML code. However, I cannot do this by user control using an <a href "javascript" ... call.

    What is going wrong? As I have indicated in the comments in the file, the 'document.write' statement works in its own right to call a new CSS file. The function also works in its own right. However, the href doesn't do what I expected.

    However, that is just the start. If I can get this to work, I would like a way of passing the 'new' stylesheet to other pages, so that the user selects their options once and then sees the same appearance in all pages in the VLE.

    Comments and advice would be very welcome.

    Many thanks

    Philippa

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello

    if you need a stylesheet switch try eddie traversa's one at

    http://dhtmlnirvana.com

    http://dhtmlnirvana.com/downloads/styleswitch.zip

    cross browser even NS4, small and ezy to use

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's an example:
    Code:
    <!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" 
      xml:lang="en" lang="en">
    <head>
    <title>html and javascript</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" /> 
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    
    <style type="text/css">
    <!-- 
    
    .style1{
    	background-color: teal;
    }
    .style2{
    	background-color: blue;
    }
    
    
    -->
    </style>
    <script type="text/javascript" language="javascript">
    <!-- Hide from browsers without javascript
    
    function change_bg()
    {
    	document.body.className = "style2";
    	return false;
    }
    
    // End hiding -->
    </script>
    </head>
    <body class="style1">
    
    <a href="default.htm"  onclick="return change_bg()">change background color</a>
    
    </body>
    </html>

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Cambridge, England
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your replies. I'll look at the code later.

    Philippa


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •