html - 网页中的大小更改段落

Question

我对网络开发有点陌生，我想要一个带有文本的框，它可以用 + 或 - 改变大小，而无需重新加载它所在的页面。我该怎么做？

Answer 1

使用 javascript，您可以更改某些元素的属性，例如字体大小。

看这个例子： http: //net.tutsplus.com/tutorials/javascript-ajax/use-the-jquery-ui-to-control-the-size-of-your-text/

Answer 2

为简单起见，您可以为此使用jQuery。

像这样简单的一行，可以实现你想要的：

$(function() {
    size = 10;
    $('#bigger').live('click', function() {
        size++;
        $('p').css('font-size', size + "px");
    });
    $('#smaller').live('click', function() {
        size--;
        $('p').css('font-size', size + "px");
    });
});​

在此处查看现场演示

Answer 3

尝试这样的事情（在这里试试：http: //jsfiddle.net/Czauu/）：

HTML：

<div id="textdiv">This is the text that will change size</div>
<a href="#" id="increase">+</a>       <!-- link to increase size -->
<a href="#" id="decrease">-</a>       <!-- link to decrease size -->

CSS：

#textdiv{ font-size:1em;}             <!-- You MUST set initial font-size -->

查询：

$(document).ready(function(){                       //code is only executed when page is fully loaded

    $("#increase").click(function(){                // triggered when the #increase link is clicked
        size = parseFloat($('#textdiv').css('font-size'), 10);  //get current size
        $('#textdiv').css('font-size', size*1.2);   // increase size
        return false;                               // prevent the link action
    });

    $("#decrease").click(function(){                 // #decrease link is clicked
        size = parseFloat($('#textdiv').css('font-size'), 10); //get current size
        $('#textdiv').css('font-size', size*0.8);    //decrease size
        return false;
    });
});

Answer 4

您可以使用 Javascript 来实现它。基本上，您需要执行以下操作：

var plus_btn = $("#increase"),
    minus_btn = $("#decrease"),
    contents = $("#box > p"),
    size;

size = parseInt(contents.css("font-size")); //current font-size

plus_btn.click("click",function(e){
    size++;
    contents.css("font-size",size+"px");

});
minus_btn.click("click",function(e){
    size--;
    contents.css("font-size",size+"px");   
});

我在 jsfiddle 中写了一个小样本，你可以看看这个