Skip to content

Instantly share code, notes, and snippets.

@mikechambers

mikechambers/default.css

Created May 4, 2012 06:27
Show Gist options
  • Save mikechambers/2592601 to your computer and use it in GitHub Desktop.
Save mikechambers/2592601 to your computer and use it in GitHub Desktop.
Download ZIP
Example that shows how to dynamically apply and remove style sheets
Raw
default.css
.test {
color:#FF0000;
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TITLE</title>
<link rel="stylesheet" href="default.css">
<script src="jquery.js"></script>
<script src="main.js"></script>
</head>
<body>
<div class="test">Hi!</div>
<div><a href="#" id="toggle_div">Toggle Style Sheets</a></div>
</body>
</html>
Raw
main.js
$(document).ready(function() {
$("#toggle_div").click(
function(event){
if(document.getElementById("new_css")){
$("#new_css").remove();
}
else{
$("head").append("<link id=\"new_css\" />");
$("#new_css").attr({
"rel": "stylesheet",
"type": "text/css",
"href": "new.css"
}
);
}
}
);
});
Raw
new.css
.test {
color:#00FF00;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment