1

这就是我想要做的。在我的 html 页面上，我必须有 4 种不同的字体大小，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

这应该让你开始；一个更改 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 回答
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>

您会注意到我已将Reset按钮设置为 15 像素，但我不确定在您的情况下默认字体大小应该是多少。

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