How Do I Switch External Css Files?

July 09, 2024 Post a Comment

I've got a couple books that I'm reading on AJAX, but still quite new. All the tutorials and these books have the ubiquitous examples of: an auto-populating search bar and an async

Solution 1:

Add an id attribute to the CSS link tag to manipulate the tag using JavaScript:

<linkid="cssfile" href="css/avocado.css"type="text/css" rel="stylesheet">

The Javascript to set the href attribute resembles:

document.getElementById('cssfile').href = 'css/carrot.css';

Colours could be tweaked by the user, by clicking a link:

<ahref="#"onclick="document.getElementById('cssfile').href='css/carrot.css';">Carrots</a>

By changing the media type, this could also allow users to quickly change print layouts, the preferred layout on mobiles (or tablets), and more.

This solution does not require jQuery.

Solution 2:

Stylesheet Switcher in jQuery.

In response to the 'newbie followup' comment, I will try to make it a little more instructional.

The page I was playing with to test on while writing can be found here.

Page Display

You're going to want to have your current stylesheet displayed in a <link> tag in the <head> of each of your pages. The <link> tag will need an id for reference later in JavaScript. Something like:

<?php// Somewhere in the server side code, $current_stylesheet is read from the user's // "preferences" - most likely from a database / session object$current_stylesheet = $user->stylesheet;
?>
<link href='<?php echo $current_stylesheet ?>' rel='stylesheet' type='text/css' id='stylelink' />

Changing the preference

Once you are displaying the users stylesheet, you need a way to change it. Create a <form> that will send a request to the server when the user changes their stylesheet:

Baca Juga

<formmethod="GET"id="style_form" ><selectname="stylesheet"id="styleswitch"><optionvalue="css1.css">Black &amp; White</option><optionvalue="css2.css"selected="selected">Shades of Grey</option></select><inputvalue='save'type='submit' /></form>

Server Side

Now, without jQuery, submitting this form should GET (you could change it to POST if you like) stylesheet={new stylesheet} on the current page. So somewhere in your bootstrap / sitewide include file, you do a check for it, a php sample:

$styles = array(
  'css1.css' => 'Black &amp; White',
  'css2.css' => 'Shades of Grey',
);

if (!empty($_GET["sytlesheet"]) {
  // VALIDATE IT IS A VALID STYLESHEET - VERY IMPORTANT// $styles is the array of styles:if (array_key_exists($_GET["stylesheet"], $styles)) {
    $user->stylesheet = $_GET["stylesheet"];
    $user->save();
  }
}

Live Preview

At this point, you have a functioning styleswitcher for the lame people without javascript. Now you can add some jQuery to make this all happen a little more elegantly. You'll want to use the jQuery Form Plugin to make a nice ajaxForm() function, that will handle submitting the form. Add the jQuery and jQuery Form library to the page:

<scripttype='text/javascript'src='/js/jquery.js'></script><scripttype='text/javascript'src='/js/jquery.form.js'></script>

Now that we have the libraries included -

$(function() {
  // When everything has loaded - this function will execute:


  $("#style_form").ajaxForm(function() {
    // the style form will be submitted using ajax, when it succeeds:// this function is called:
    $("#thediv").text('Now Using: '+$('#styleswitch').val());
  });

  $("#styleswitch").change(function() {
    // When the styleswitch option changes, switch the style's href to preview
    $("#stylelink").attr('href', $(this).val());
    // We also want to submit the form to the server (will use our ajax)
    $(this).closest('form').submit();
  });

  // now that you have made changing the select option submit the form,// lets get rid of the submit button
  $("#style_form input[type=submit]").remove();
});

Solution 3:

Here's an example that uses jQuery.

<!DOCTYPE html><html><head><linkrel="stylesheet"type="text/css"href="style1.css" /><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"type="text/javascript"></script><scripttype="text/javascript">
            $(function(){
                $('#change-css').click(function(e){
                    e.preventDefault();
                    $('link[rel="stylesheet"]').attr('href', 'style2.css');
                });
            });
        </script></head><body><aid="change-css"href="#">change css</a></body></html>

The operative line is $('link[rel="stylesheet"]').attr('href', 'style2.css');. This finds any <link> tag that has rel="stylesheet" and changes its href attribute to style2.css.

Solution 4:

It has nothing to do with Ajax. It has everything to do with JS and DOM manipulation (Some key words to search for tutorial). I am using Mootools, which is a JS library and it has a built in function for that. If doing it manually is your thing, then I would simply add a <link> element to the <head> or adjust the href attribute of an existing <link> element.

<linkrel="stylesheet"href="http://sstatic.net/so/all.css?v=6063"id='bobo'>
...
...
...
<script>document.getElementById('bobo').href="http://my.doamin.com/new.css";</script>

Solution 5:

You could also load both CSS files and preface the all of the selectors on the second file with a body classname.

body.secondsheet {}
body.secondsheeta {}
body.secondsheet hr {}

Then all you have to do is add/remove the "secondsheet" class to the body tag to switch stylesheets.

JavaScript Sample