如何使用 jquery 增加/减少点击事件的元素字体大小？答案

【问题标题】：How to increase/decrease element font-size on click event using jquery?如何使用 jquery 增加/减少点击事件的元素字体大小？
【发布时间】：2017-01-16 09:12:52
【问题描述】：

我正在为视障人士做一个网站。我有三个按钮：

增大字体
缩小字体
正常模式

我需要通过单击为font-size 添加+2 像素为* 类。请帮助我如何在javascript中实现它。

【问题讨论】：

您已经尝试过什么了吗？提供一些已有的代码，不然没人乐意帮你

标签： javascript jquery html font-size

【解决方案1】：

您可以使用来自jsfiddle 的示例代码。它选择一个类的所有元素（您可以将其更改为您想要的任何内容），确定当前字体大小并为所有这些元素分配更大/更小/默认字体。代码示例：

$(document).ready(function() {
  $("#increaseBtn").click(function() {
    var textBoxes = $('.textClass');
    var fontSize = getCurrentFontSize(textBoxes);
    textBoxes.css("font-size", fontSize + 2);
  });
  
  $("#decreaseBtn").click(function() {
  	var textBoxes = $('.textClass');
  	var fontSize = getCurrentFontSize(textBoxes);
    textBoxes.css("font-size", fontSize - 2);
  });
  
  $("#defaultBtn").click(function() {
  	$('.textClass').css("font-size", 12);
  });
});

function getCurrentFontSize(textBoxes) {
  var fontSize = textBoxes.eq(0).css("font-size");
  return parseInt(fontSize, 10);
}

.textClass {
  font-size: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="textClass">Text1</div>
<div class="textClass">Text2</div>

<input type="button" id="increaseBtn" value="Incrase text size">
<input type="button" id="decreaseBtn" value="Decrease text size">
<input type="button" id="defaultBtn" value="Default text size">

【讨论】：

【解决方案2】：

JQUERY

 size=parseInt($('p').css('font-size'));


    $("#big").on("click",function(){

      size=size+2;
       $("p").css("font-size",size + "px");
    });
    $("#normal").on("click",function(){
      size=14;
       $("p").css("font-size",size + "px");
    });
    $("#small").on("click",function(){
      size=size-2;
       $("p").css("font-size",size+ "px");
    });

HTML

 <p>CLICK ME!</p>
  <button id='big'>BIG</button>
  <button id='normal'>NORMAL</button>
  <button id='small'>SMALL</button>

链接 JSBIN

【讨论】：

【解决方案3】：

HTML、CSS 和 jQuery：

var size = 18; // or any default number yo want
$(document).ready(function() {
  $("#bigger").click(function() {
    $("p").css("font-size", size + 1 + "px");
    size++;
  });
  $("#smaller").click(function() {
    $("p").css("font-size", size - 1 + "px");
    size--;
  });
  $("#moreBigger").click(function() {
    $("p").css("font-size", size + 2 + "px");
    size+=2;
  });
});

p {
  font-size: 18px
}
// or any default number you want

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Some Text</p>

<button id="bigger">Bigger</button>
<button id="smaller">Smaller</button>
<button id="moreBigger">More Bigger</button>

【讨论】：

可以让他每次增加2个像素的同时font-size不会超过30？
是的，你可以，把它放在一个if条件中：if(size<30){$("p").css("font-size", size + 1 + "px"); size++}

【解决方案4】：

document.getElementById("yourElement").style.fontSize = yourValue;

【讨论】：

【解决方案5】：

其实没那么难

CSS：

// Set all inherited fonts to
body.impaired-view, body.impaired-view * {
    font-size: 150%;
}

JavaScript：

// Add the class 'impaired-view' to the body
function enlargeFont() {
    var body = document.querySelector('body');
    body.classList.add('impaired-view');
}

// Remove if not longer necceary
function shrinkFont() {
    var body = document.querySelector('body');
    body.classList.remove('impaired-view');
}

【讨论】：