Кнопки изменения размера текста

Question

<script type="text/javascript"> 
     function changeFontSize(element,step) 
     { 
      step = parseInt(step,10); 
      var el = document.getElementById(element); 
      var curFont = parseInt(el.style.fontSize,10); 
      el.style.fontSize=(curFont+step) +'px'; 
     } 
    </script> 

<button type="button" a href="javascript:void(0);" onClick="changeFontSize('content','2');"> 
    </a>A+</button> 
    <button type="button" a href="javascript:void(0);" onClick="changeFontSize('content','-2');"> 
    </a>A-</button> 

Кнопки размера текста не работают на моем веб-сайте, они появляются, но при нажатии они не изменяют размер текста. У меня есть идентификатор div, называемый содержимым.

Answer 1

Если вы хотите без JQuery решения без установки исходного размера, вы можете использовать window.getComputedStyle() для вычисления текущего размера шрифта. Эта работа во всем, включая IE9 +.

Другие изменения:

1. Удалить a и href немного, просто используйте кнопку.
2. step может быть передан в виде числа, а не строки (работает так или иначе, но проходя ряд имеет больше смысла)

function changeFontSize(element, step) { 
 
    //step = parseInt(step, 10); // no need for this line if pass as a number 
 
    var el = document.getElementById(element); 
 
    var curFont = parseInt(window.getComputedStyle(el).fontSize, 10); 
 
    el.style.fontSize = (curFont + step) + 'px'; 
 
}

<div id="content">Some text...</div> 
 
<button type="button" onClick="changeFontSize('content', 2);">A+</button> 
 
<button type="button" onClick="changeFontSize('content', -2);">A-</button>

Answer 2

Вы можете попробовать это вместо:

function changeFontSize(step) { 
    var size = $('p').css('font-size'); 
    $('p').css('font-size', (step+size)+'px'); 
} 

Затем вызовите эту функцию на кнопку мыши, проходящей в значении для шага.

Это решение использует jQuery, но будет работать без проблем.

Кроме того, необходимо установить начальный размер в файле CSS

Answer 3

только небольшое изменение весь код нормально

т.е. первого размера набора шрифтов для вашего DIV

<div id="content" style="font-size:20px;">Test text</div> 

Answer 4

Вы можете попробовать его с JQuery

$("#largefont").click(function(){ 

    var size = parseInt($("p").css('font-size').replace('px',''),10); 
    //alert(size); 
    if(size < 30){ 
    $("p").css('font-size', size+1);} 
    else 
    { alert("Max Font Size reached.")} 

    }); 
    $("#smallfont").click(function(){ 

    var size = parseInt($("p").css('font-size').replace('px',''),10); 
    //alert(size); 
    if(size > 12){ 
    $("p").css('font-size', size-1);} 
    else 
    { alert("Min Font Size reached.")} 

    }); 

проверку на скрипку http://jsfiddle.net/nikkirs/go2whqja/