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

使用CSS和body上的其他类来更改基本字体大小可能会更方便吗？与这些类相关，您也可以在没有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'));
    });

});

请参阅小提琴http://jsfiddle.net/shurshilin/94cnutdr/

跳，它会帮助你。

Answer 3

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

单击一个按钮以更改javascript / css中的文本字体大小

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

3 个答案: