cssを変更するボタン
Result
jQuery
$("a.css-switch").click(function() {
//link rel="***"を変える
$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
});
css
h1{
font-size:40px;
font-weight:bold;
margin:25px;
//Google font API
font-family: 'Fredericka the Great','Jim Nightshade', 'Flamenco', cursive;
}
a{text-decoration:none;color:red;}
a:hover{color:#666;}
html
<a href="javascript:void(0);" class="css-switch" rel="default.css">Default </a> |
<a href="javascript:void(0);" class="css-switch" rel="http://fonts.googleapis.com/css?family=Fredericka+the+Great">Fredericka the Great</a> |
<a href="javascript:void(0);" class="css-switch" rel="http://fonts.googleapis.com/css?family=Jim+Nightshade"> Nightshade</a> |
<a href="javascript:void(0);" class="css-switch" rel="http://fonts.googleapis.com/css?family=Flamenco:300"> Nightshade</a>
<h1>Sample</h1>