Html 更改网页中段落的大小

我对web开发人员有点陌生，我希望有一个包含文本的框，可以使用+或-改变大小，而无需重新加载它所在的页面。我该怎么做呢？

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

看看这个例子：

试试这样的东西（在这里试试：）：

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 -->

#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;
    });
});

---

为了简单起见，您可以使用

像这样一条简单的线，可以实现您想要的：

$(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");
    });
});​

---

请参阅实时演示

您可以使用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中写了一个小例子，您可以查看

是的，但是您有很多技巧。例如，在此文本前面放置一个div，或者不替换文本（并存储在内存中）。@user1060828要隐藏文本，请将其封装在单独的div中，然后使用javascript更改样式以显示：block/display:none来显示/隐藏它-比物理隐藏或“记住”更简单删除后的文本。是否有用于此的jquery插件@毛绒绒被用来展示/隐藏？如果您使用的是jquery，那么就可以使用.show（）.hide（）.toggle（）函数，您不需要为thoseI提供插件，我不明白。。。？您可以使用.show（）和.hide（）隐藏部分文本，只需将其包装在一个div或span中并显示或隐藏它。为此，您必须使用JavaScript，这里看到了一些关于jQuery的答案，如果您不知道，它是一个JavaScript库。此版本的代码还实现了文本显示/隐藏，正如您在前面的评论中所问的：