单击按钮更改 javascript/css 中 <body> 的文本字体大小

Question

要清楚地了解我在做什么，请检查此 example 或检查以下代码

此示例是更改 h1、h2、p 的文本大小。

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

Answer 1

如果你在除正文以外的所有地方都使用单位'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>

Answer 2

实际上，您可以用比您想象的简单得多的方式完成此操作。

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

可以单独使用 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>

Answer 3

也许在 body 上使用 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'));
    });

});

参见 fiddle http://jsfiddle.net/shurshilin/94cnutdr/

跳，它会帮助你。

Answer 4

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

单击按钮更改 javascript/css 中 <body> 的文本字体大小

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

html

javascript

css

jquery

font-size

要清楚地了解我在做什么，请检查此 example 或检查以下代码