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 renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em>CoursesWeb.net</em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicate the PHP variable that contains data from a form sent with method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Change CSS file with jQuery

Last accessed pages

  1. Deco Tool (2749)
  2. Display data from PHP Array, or MySQL in HTML table (27036)
  3. CSS cursor property - Custom Cursors (6373)
  4. Keep the first Nr IMG tags, Strip all the others (314)
  5. Select the Content of HTML Element (4522)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (458)
  2. CSS cursor property - Custom Cursors (69)
  3. Read Excel file data in PHP - PhpExcelReader (46)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (44)
  5. PHP Unzipper - Extract Zip, Rar Archives (41)