Question

我对网络开发有点新手，我希望有一个带有文字的框，可以用+或 - 更改尺寸，而无需重新加载它所在的页面。我怎么能这样做？

Answer 1

使用javascript可以更改某些元素的属性，例如font-size。

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

Answer 2

尝试这样的事情（在此尝试：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 -->

<强> JQuery的：

$(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 3

为简单起见，您可以使用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");
    });
});

查看实时演示here

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写了一个小小的，你可以查看this

在网页中更改段落的大小

4 个答案: