如何使用 jquery 在单击事件中 increase/decrease 元素字体大小？

Question

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

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

我需要通过单击为 font-size 添加 +2 像素为 class *。请帮助我如何在 javascript.

中实施

Answer 1

实际上并没有那么难

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

Answer 2

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

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

Answer 4

您可以使用 jsfiddle 中的示例代码。它选择具有一个 class 的所有元素（您可以将其更改为任何您想要的），确定当前字体大小并为所有这些元素分配 bigger/smaller/default 字体。代码示例：

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

Answer 5

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>

LINK JSBIN

如何使用 jquery 在单击事件中 increase/decrease 元素字体大小？

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

html

javascript

jquery

font-size