Skip to content

Instantly share code, notes, and snippets.

@barnettjw
Created April 10, 2015 16:10
Show Gist options
  • Save barnettjw/0f6982b497e20b94e3ad to your computer and use it in GitHub Desktop.
Save barnettjw/0f6982b497e20b94e3ad to your computer and use it in GitHub Desktop.
Change font size using JQuery
<div class="container">
<h1>Resize Me</h1>
<p class="font-size-label">Font Size</p>
<button id="up">+</button>
<p id="font-size"></p>
<button id="down">-</button>
</div>
// When + or - buttons are clicked the font size of the h1 is increased/decreased by 2
// The max is set to 50px for this demo, the min is set by min font in the user's style sheet
function getSize() {
size = $( "h1" ).css( "font-size" );
size = parseInt(size, 10);
$( "#font-size" ).text( size );
}
//get inital font size
getSize();
$( "#up" ).on( "click", function() {
// parse font size, if less than 50 increase font size
if ((size + 2) <= 50) {
$( "h1" ).css( "font-size", "+=2" );
$( "#font-size" ).text( size += 2 );
}
});
$( "#down" ).on( "click", function() {
if ((size - 2) >= 12) {
$( "h1" ).css( "font-size", "-=2" );
$( "#font-size" ).text( size -= 2 );
}
});
body { margin: 20px; }
.container {
width: 500px;
text-align: center;
}
h1 {
height: 60px;
padding: 0;
margin: 0;
}
p { display: inline-block; }
.font-size-label { margin-right: 20px; }
#font-size { margin: 0 5px; }
button {
width: 30px;
height: 30px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment