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>
<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 defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Change CSS file with jQuery

Last accessed pages

  1. Display image file in Canvas, Check its type and size before Upload (3431)
  2. Integer and Float value in Select with PDO from string to numeric (8549)
  3. Redirects (4759)
  4. SHA256 Encrypt hash in JavaScript (31106)
  5. PHP Unzipper - Extract Zip, Rar Archives (31615)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (320)
  2. PHP Unzipper - Extract Zip, Rar Archives (112)
  3. Read Excel file data in PHP - PhpExcelReader (102)
  4. SHA1 Encrypt data in JavaScript (81)
  5. Get and Modify content of an Iframe (74)