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>

文字大小按钮在我的网站上不起作用，它们会出现，但点击后它们不会改变文字大小。我确实有一个名为content的div id。

Answer 1

您可能想尝试这样做：

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

然后在按钮上调用此函数，单击传递步骤值。

此解决方案使用jQuery但不会出现问题。

您还需要在css文件中设置起始大小

Answer 2

如果您想要一个不设置初始大小的非jquery解决方案，可以使用window.getComputedStyle()来计算当前字体大小。这项工作包括IE9 +。

其他变化：

删除a和href位，只需使用按钮。
step可以作为数字而不是字符串传递（以任何方式工作，但传递数字更有意义）

＆＃13;

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

＆＃13;

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

＆＃13;

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/

文字大小更改按钮

4 个答案: