This tutorial shows you how to change the CSS file included into your page, using jQuery.
For example, if we have 2 CSS files, "style.css" and "style2.css", we can set a jQuery code to alternate the CSS included into our page, between these two files, when the user clicks on a specific element.


Here's an example, a simple web page with a <div> and a paragraph. When a user clicks on this DIV, a jQuery instruction changes /alternate the css file included into this page, in a <style> tag which has id="stl" (for details, see the comments in code).

The Web page

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Change CSS file</title>
<link href="style.css" rel="stylesheet" type="text/css" id="stl" />
<script type="text/javascript" src="jquery_library.js"></script>
<script type="text/javascript"><!--
// the CSS file is chosen  according to the positive or negative value of this variable
var plusmin = 1;

$(document).ready(function() {
  // when click on the element with id="idd"
  $('#idd').click(function(){
    plusmin *= -1;        // change the polarity of "plusmin" var
    var stl = plusmin>0 ? 'style.css' : 'style2.css';     // sets the css file, according to plusmin

    // change the css file of the tag with id="stl" and rel="stylesheet"
    $('#stl[rel=stylesheet]').attr('href', stl);
  });
});
--></script>
</head>
<body>
<div id="idd"> Click here:<br />
Alternate the CSS file for this page<br />
Between "style.css" and "style2.css"</div>
<p class="hdp">This paragraph has display:none; in style2.css</p>
</body>
</html>

style.css file

body { text-align: center; }
#idd {
 width: 200px;
 background: #a7efa8;
 margin: 2px auto;
 border: 2px solid blue;
 padding: 5px 8px;
 text-align: left;
 font-size: 16px;
 cursor: pointer;
}

style2.css file

#idd {
 width: 300px;
 margin: 2px auto 2px 80px;
 background: #dadafe;
 border: 2px dashed #a0cea1;
 padding: 5px 8px;
 font-size: 16px;
 font-weight: bold;
 text-align: center;
 cursor: pointer;
}
p.hdp { display: none; }

Demo:
Click here:
Alternate the CSS file for this page
Between "style.css" and "style2.css"

This paragraph has display:none; in style2.css

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Change CSS file with jQuery

Last accessed pages

  1. Insert, Select and Update NULL value in MySQL (25324)
  2. The Rise Of Atlantis (12130)
  3. innerHTML in PHP (6400)
  4. Bubbles3 (52204)
  5. Raft Wars (2274)

Popular pages this month

  1. Flash Games - Free online Games (1930)
  2. Qwop (1474)
  3. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (1331)
  4. Tunnel Rush (1259)
  5. Drag Racer V3 (979)