html - Webページのサイズ変更段落

Question

私はWeb開発に少し慣れていないので、ページをリロードせずに+または-でサイズを変更できるテキスト付きのボックスが必要です。どうすればよいですか？

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

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で小さなスメープルを書きました、あなたはこれをチェックすることができます

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

ライブデモはこちら

Answer 4

次のようなことを試してください (ここで試してみてください: 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;
    });
});