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

How to increase/decrease element font-size on click event using jquery?

本文关键字：事件 元素 字体 jquery 何使用 增加      更新时间：2023-09-26

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

    <
  1. 增加字体/kbd>
  2. 减小字体
  3. 正常模式

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

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");
    });


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

JSBIN

其实没那么难，

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');
}

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

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>

您可以使用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">

相关文章：