Question

这就是我想要做的。在我的html页面上，我必须有4种不同的字体大小，然后重置10px 20px 30px 40px。

当我在10px上点击或翻转时，字体大小会发生变化，并在div框中显示字体的新大小。

我还有一个输入框，所以当我输入输入框并按提交时，它会显示您输入的文本，并在div框中显示CSS中指定的字体。

Answer 1

对于你想要的HTML想要这样的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 ) );
        }

    }

});

这应该足以让你开始

Answer 2

这应该让你开始;一个更改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/

Answer 3

 $("p1").mouseover(function(){
 $("p").css("fontsize","10px");
 });

 $("button ").onclick(function(){1
 $("p").css("fontsize","10px");
 });

Answer 4

这可能不是你想要的，但它应该让你开始，它是一个纯粹的 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按钮设置为15px，但我不确定您的默认字体大小应该是什么。

<强>的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解决方案很受欢迎，因为它通常会解决兼容性问题。

<强> EXAMPLE

仅限JavaScript - 如何在单击或翻转时更改字体大小

4 个答案: