CODEWITHSUNDEEP
javascriptjqueryhtmlcssfont-size
Lo Siu Fung
Lo Siu Fung

Reputation: 137

click a button to change text font-size of <body> in javascript/css

To get a clear picture of what i am doing check this example or check the following code

This example is to change text size of h1, h2, p.

Is there a way in javascript/css that I can change text size of "body" that I can change the whole page text?

$(document).ready(function() {

  $("#small").click(function(event) {
    event.preventDefault();
    $("h1").animate({
      "font-size": "24px"
    });
    $("h2").animate({
      "font-size": "16px"
    });
    $("p").animate({
      "font-size": "12px",
      "line-height": "16px"
    });

  });

  $("#medium").click(function(event) {
    event.preventDefault();
    $("h1").animate({
      "font-size": "36px"
    });
    $("h2").animate({
      "font-size": "24px"
    });
    $("p").animate({
      "font-size": "16px",
      "line-height": "20px"
    });

  });

  $("#large").click(function(event) {
    event.preventDefault();
    $("h1").animate({
      "font-size": "48px"
    });
    $("h2").animate({
      "font-size": "30px"
    });
    $("p").animate({
      "font-size": "20px",
      "line-height": "20px"
    });


  });

  $("a").click(function() {
    $("a").removeClass("selected");
    $(this).addClass("selected");

  });

});
* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
}
body {
  background: #e7e7e7;
}
#wrapper {
  width: 400px;
  margin: 0 auto;
  padding: 40px;
  background: #fff;
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, .25);
}
#controls {
  float: right;
  padding: 2px;
  width: 25px;
  background: #333;
  position: fixed;
  margin: 0 0 0 440px;
  text-align: center;
  transition: .25s ease-out;
}
#controls a {
  font-size: 24px;
  color: #aaa;
  display: block;
  font-weight: bold;
  padding: 5px;
}
#controls a:hover {
  color: #fff;
  background: #000;
  transition: .25s ease-out;
}
a.selected {
  background-color: #294C52;
  color: #fff !important;
}
#small {
  font-size: 10px !important;
}
#medium {
  font-size: 16px !important;
}
#large {
  font-size: 20px !important;
}
.small {
  font-size: 75%;
}
h1 {
  font-size: 36px;
  font-weight: bold;
}
h2 {
  font-size: 24px;
  margin: 10px 0;
}
p {
  font-size: 14px;
  line-height: 20px;
}
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<body>

  <div id="wrapper">
    <div id="controls">
      <a href="#" id="small">A</a>
      <a href="#" id="medium" class="selected">A</a>
      <a href="#" id="large">A</a>
    </div>
    <h1>Header</h1>
    <h2>Subheader</h2>
    <p>Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id. Ius ad ubique animal, eum recteque electram explicari no, sed in nostrum adipiscing. Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id.</p>
  </div>

</body>

Upvotes: 2

Views: 9496

Answers (4)

Chaoix
Chaoix

Reputation: 1360

I wrote a jQuery plugin to accomplish this on more complex existing website designs. https://github.com/msigley/jQuery-Chaos-Fontsize-Selector

Upvotes: 0

Alex
Alex

Reputation: 829

If you use font-sizes with unit 'em' everywhere except for the body, you can change the body font-size and all others will also change.

JSFiddle

$(document).ready(function() {
    $('.change-fs').click(function() {
        $('.body').css('font-size', $(this).attr('data-size'));
    });
});
.body {
    font: 400 10pt sans-serif;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size:1.5em;
}

p {
    font-size: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="body">
    <h1>A header, really big</h1>
    <h2>A secondary header, still quite big</h2>
    <p>Normal text, default font-size</p>
    <div class="fs-ctrl">
        <div data-size="10pt" class="change-fs">10pt</div>
        <div data-size="12pt" class="change-fs">12pt</div>
        <div data-size="16pt" class="change-fs">16pt</div>
        <div data-size="20pt" class="change-fs">20pt</div>
    </div>
</section>

Upvotes: 3

SW4
SW4

Reputation: 71160

You can actually accomplish this in a far simpler way than you may think.

By setting a starting font size on the body, you can set the font size of your other elements to use relative em units (1em = 1xbody font size in this case, so if the body font size is 14px, 1em = 14px). You can then use Javascript to increase / decrease the body font size, thereby impacting the relative font sizes of these elements.

Animation can be handled using a CSS transition alone.

$(document).ready(function() {
  $('#increase, #decrease').on('click', function() { // click to increase or decrease
    var btn = $(this),
      fontSize = parseInt(window.getComputedStyle(document.body, null).fontSize, 0); // parse the body font size as a number
    if (btn[0].id === "increase") { // detect the button being clicked
      fontSize++; // increase the base font size
    } else {
      fontSize--; // or decrease
    }
    document.body.style.fontSize = fontSize + 'px'; // set the body font size to the new value
  });
});
body {
  font-size: 14px;
}
h1,
h2 {
  transition: font-size 200ms; /* animate font size changes */
}
h1 {
  font-size: 2em; /* h1 element is 2x body font size */
}
h2 {
  font-size: 1.5em; /* h1 element is 1.5x body font size */
}
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<button id="increase">increase +</button>
<button id="decrease">decrease -</button>

<h1>Header 1</h1>

<h2>Header 2</h2>

Upvotes: 5

Dmitry Shurshilin
Dmitry Shurshilin

Reputation: 766

Maybe it will be more convenient to use CSS and additional classes on body to change base font-size? Related these classes you also can change sizes of other elements without JavaScript/JQuery coding.

HTML

<button class="js-font" data-size="big">Bigger</button>
<button class="js-font" data-size="normal">Normal</button>
<button class="js-font" data-size="small">Smaller</button>

CSS

body, body.normal {
    font-size: 16px;
}
body.big {
    font-size: 36px;
}
body.small {
    font-size: 12px;
}

JQuery

$(function() {

    $('.js-font').on('click', function() {
        $('body')
            .attr('class', '')
            .addClass($(this).data('size'));
    });

});

See fiddle http://jsfiddle.net/shurshilin/94cnutdr/

Hop, it'll help you.

Upvotes: 2

Related Questions