Как увеличить/уменьшить размер шрифта элемента при клике, используя jquery?

Question

Я делаю сайт для слабовидящих. У меня есть три кнопки:

1. увеличить размер шрифта
2. уменьшить шрифт
3. в нормальном режиме

мне нужно, нажав добавить +2 пикселей для font-size для класса * , Пожалуйста, помогите, как это можно реализовать в javascript.

Answer 1

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

Answer 2

Это не так сложно, на самом деле

CSS:

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

JavaScript:

Answer 3

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

Answer 4

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 5

Вы можете использовать образец кода из jsfiddle. Он выбирает все элементы с одним классом (вы можете изменить его на все, что хотите), определяет текущий размер шрифта и назначает шрифт большего/меньшего/стандартного для всех этих элементов. пример кода:

$(document).ready(function() { 
 
    $("#increaseBtn").click(function() { 
 
    var textBoxes = $('.textClass'); 
 
    var fontSize = getCurrentFontSize(textBoxes); 
 
    textBoxes.css("font-size", fontSize + 2); 
 
    }); 
 
    
 
    $("#decreaseBtn").click(function() { 
 
    \t var textBoxes = $('.textClass'); 
 
    \t var fontSize = getCurrentFontSize(textBoxes); 
 
    textBoxes.css("font-size", fontSize - 2); 
 
    }); 
 
    
 
    $("#defaultBtn").click(function() { 
 
    \t $('.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">