单击一个按钮以在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.

此示例是更改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?

有没有办法在javascript / css中我可以更改“body”的文本大小,我可以更改整页文本?

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

4 个解决方案

#1

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.

也许在主体上使用CSS和其他类来更改基本字体大小会更方便吗?与这些类相关,您也可以在不使用JavaScript / JQuery编码的情况下更改其他元素的大小。

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/

见小提琴http://jsfiddle.net/shurshilin/94cnutdr/

Hop, it'll help you.

跳,它会帮助你。

#2

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.

通过在正文上设置起始字体大小,您可以将其他元素的字体大小设置为使用相对的em单位(在这种情况下,1em = 1xbody字体大小,因此如果正文字体大小为14px,则1em = 14px)。然后,您可以使用Javascript来增加/减少正文字体大小,从而影响这些元素的相对字体大小。

Animation can be handled using a CSS transition alone.

可以仅使用CSS转换来处理动画。

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

#3

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.

如果除了正文之外在任何地方使用单位'em'的字体大小,您可以更改正文字体大小,其他所有字体也会更改。

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>

#4

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

我写了一个jQuery插件来完成更复杂的现有网站设计。 https://github.com/msigley/jQuery-Chaos-Fontsize-Selector

#1