Question

我正在尝试使用输入重新调整jquery中我的一个div的字体大小。理想情况下，输入框内的数字会被添加到现有的字体大小，但到目前为止我的尝试都没有成功。

这是我到目前为止所做的，但它似乎没有起作用：

HTML

<div class="resizeable" style="font-size: 30px;">test</div>
<input type="text" name="size" class="size" />

JQuery的

$(document).ready(function() {
    $('.size').keyup(function() {
        var currentFontSize = $('this').css('font-size');
        var input = $(this).val(); // grab the input value
        var newsize = input + currentFontSize;
        console.log(size);

        if ($(this).val().length > 0)
        {
            // replace css value on live preview 
            $('.resizeable').css('font-size', newsize);  
        } 
    }); 
});

的jsfiddle http://jsfiddle.net/eqE2R/36/

任何帮助都将不胜感激。

Answer 1

您需要添加px值并使用parseInt()添加：

$('.size').keyup(function() {
    var currentFontSize = $('.resizeable').css('font-size');
    var input = $(this).val(); // grab the input value
       alert(currentFontSize)
    var newsize =parseInt(input,10) + parseInt(currentFontSize,10);
    console.log(newsize);

    if ($(this).val().length > 0)
    {
        // replace css value on live preview 
        $('.resizeable').css('font-size', newsize + 'px');  
    } 
  });

Demo

Answer 2

<强> FIDDLE

您忘记在值中添加px。您还必须将值解析为int

$(document).ready(function() {
    var currentFontSize = $('.resizeable').css('font-size');
    $('.size').keyup(function() {
        var input = $(this).val(); // grab the input value
        var newsize = parseInt(input) + parseInt(currentFontSize);

        if ($(this).val().length > 0)
        {
            // replace css value on live preview 
            $('.resizeable').css('font-size', newsize + 'px');  
        } 
    }); 
});

修改：我将currentFontSize变量deifnition移到keyup函数之外，因此它将在开头只声明一次。

如何使用jquery中的输入动态更改css字体大小？

2 个答案: