Jquery Course

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>
<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"
    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);
<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>

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; }

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

Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Change CSS file with jQuery

Last accessed pages

  1. Simple Admin Login PHP Script (8219)
  2. Follow the mouse cursor with a DIV inside a Parent (5746)
  3. ActionScript 3 - Change MovieClip Color (7703)
  4. Voting Poll System script PHP-AJAX (7444)
  5. Read Excel file data in PHP - PhpExcelReader (84342)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (530)
  2. PHP Unzipper - Extract Zip, Rar Archives (427)
  3. SHA256 Encrypt hash in JavaScript (411)
  4. Read Excel file data in PHP - PhpExcelReader (367)
  5. Create simple Website with PHP (339)