Change font size using JQuery

Change-font-size-using-JQuery.markdown

Change font size using JQuery

A Pen by James Barnett on CodePen.

License.

index.html

<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>

script.js

// 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  );
  }
});

style.css

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;
  }