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 type of <input> creates a color well control for selecting a color value?
type="text" type="color" type="date"
<input type="color" name="get_color" />
Which CSS method rotates the HTML element at a given degree?
scale() translate() rotate()
#some_id:hover {
  transform: rotate(60deg);
  -ms-transform: rotate(60deg);    /* IE 9 */
  -moz-transform: rotate(60deg);   /* Firefox */
}
Click on the function that returns the number with the highest value.
pow() min() max()
var maxn = Math.max(8, 4, 88, 56);
alert(maxn);      // 88
Which function prevent the same file from being included more than once in a page?
include() include_once() require()
include_once("some_file.php");
Change CSS file with jQuery

Last accessed pages

  1. PHP OOP - Inheritance, class extends (4264)
  2. Node.js Move and Copy file (18584)
  3. Insert, Select and Update NULL value in MySQL (51633)
  4. SHA1 Encrypt data in JavaScript (17695)
  5. Convert JSON in JavaScript (6004)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (189)
  2. Register and show online users and visitors (123)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (118)
  4. Read Excel file data in PHP - PhpExcelReader (115)
  5. JavaScript Course - Free lessons (99)