1

これが私がやろうとしていることです。私のhtmlページでは、4つの異なるフォントサイズが必要で、そのうちの1つ10px 20px 30px 40pxはリセットされます。

クリックまたはロールオーバーすると10px、フォント サイズが変更され、divボックスにフォントの新しいサイズが表示されます。

入力ボックスもあるので、入力ボックスに入力して送信を押すと、入力したテキストが表示され、 でdiv割り当てられたフォントでボックス内に表示されますCSS。

4

4 に答える 4

1

bs必要なHTMLについては、次のようなものが必要です

<ul id="sizes">
    <li class="size" rel="10">10px</li>
    <li class="size" rel="20">20px</li>
    <li class="size" rel="30">30px</li>
    <li class="size" rel="40">40px</li>
    <li>
        <input class="manual" type="text" />
    </li>
<ul>
<div id="content">The font size to change goes here</div>

そしてjQueryの場合

$( '#sizes' ).on({

    mouseover: function ( event ) {

        var $target = $( event.target );

        if ( $target.is( '.size' ) ) {
            $( '#content' ).css( 'font-size', $target.attr( 'rel' ) );
        }

    },
    blur: function ( event ) {

        var $target = $( event.target );

        if ( $target.is( '.manual' ) ) {
            $( '#content' ).css( 'font-size', parseInt( $target.val(), 10 ) );
        }

    }

});

それはあなたが始めるのに十分なはずです

于 2013-01-25T13:51:28.660 に答える
0

これはあなたが望んでいるものとは正確に一致しないかもしれませんが、それはあなたが始めるはずであり、それは純粋なJavaScriptソリューションです：

HTML

<div id="fonts">
    <button value="10px">10px</button>
    <button value="20px">20px</button>
    <button value="30px">30px</button>
    <button value="40px">40px</button>
    <button value="15px">Reset</button>
</div>

<div id="text">The font size to change goes here</div>

ボタンを15pxに設定したことに気付くでしょうResetが、あなたの場合のデフォルトのフォントサイズがわかりませんでした。

Javascript：

var text = document.getElementById("text");
var size = "15px";

var changeFontSize = function(e){
    var target = e.target;
    if(target.nodeName.toLowerCase() === "button"){
        text.style.fontSize = target.value;
        if(e.type.toLowerCase() === "click"){
            size = target.value; 
        }    
    }
};

var mouseOut = function(e){
    text.style.fontSize = size;
}

document.addEventListener("click", changeFontSize, false);
document.addEventListener("mouseover", changeFontSize, false);
document.addEventListener("mouseout", mouseOut, false);

必要なブラウザの互換性によっては、 addEventListenerとattachEventを調べる必要がある場合があります。

イベントハンドラーを実行してe値をいじるとき、ブラウザー間で少し注意が必要です。これが主にjQueryソリューションが人気がある理由です。これは、一般的に互換性の問題を処理するためです。

例

于 2013-01-25T14:21:27.983 に答える
0

これで始められるはずです。divのフォントサイズを変更するボタン、およびテキストボックスからdivにテキストをコピーするボタン：

<div id="demo"></div>

<input type="button" value="Size 10" onclick="document.getElementById('demo').style.fontSize='10px';" />

<input type="text" id="demotext" />
<input type="button" value="Use text" onclick="document.getElementById('demo').innerHTML=document.getElementById('demotext').value;" />

デモ： http： //jsfiddle.net/Guffa/AzmMc/

于 2013-01-25T13:52:28.957 に答える
0 
 $("p1").mouseover(function(){
 $("p").css("fontsize","10px");
 });

 $("button ").onclick(function(){1
 $("p").css("fontsize","10px");
 });
于 2013-01-25T14:17:28.967 に答える