仅限 JavaScript - 单击或滚动时如何更改字体大小

Question

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

当我在 10px 上单击或滚动鼠标时，字体大小会更改并在 div 框中显示新的字体大小。

我还有一个输入框，所以当我在输入框中输入内容并按下提交时，它会显示您输入的文本，并将其显示在 div 框中，并使用 中指定的字体CSS.

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

    }

});

这应该足以让你开始