如何讓用戶通過單擊文本來增加字體大小？

Question

我一直試圖弄清楚如何創建我前幾天有過一個想法，由於仍然有些菜鳥而似乎無法使它起作用。

無論如何，至此，我正試圖按照標題所說創建一個段落，用戶可以在該段落中簡單地單擊文本/段落並每次增加字體大小。

我能夠得到一個工作表，可以在其中放置一個多選框，並讓用戶以此來更改大小，但這根本不是我想要的。

我以為它看起來像這樣：

<script type="text/javascript" language="javascript">
do
    {
    if (user-clicks) increase font size;
    else keep current font size;    
    }
while (font-size < 4em)
</script>

任何經驗豐富的人都可以幫助我解決這個問題，或者至少讓我走上一條可以自己成功解決的道路嗎？ 在此先感謝您的幫助！

Answer 1

<html>
<head>
<script language="javascript">

function resizeText(multiplier) {
    multiplyText(multiplier, document.getElementById('myContent'));    
}

function multiplyText(multiplier, txtobj) {
    //keep current font size
    if (txtobj.style.fontSize == '') {
        txtobj.style.fontSize = "100%";
    }
    //keep current font size
    if (multiplier == 0) {
        txtobj.style.fontSize = "100%";
    } 
    else { //get only the number part of the fontsize
    txtobj.style.fontSize = parseFloat(txtobj.style.fontSize) + multiplier + "%";
    }
}


</script>
</head>

<body>
<p id="myContent">
 <a href="javascript:resizeText(10);"> Increase font</a></p>
</body>
</html>

Answer 2

使用JQuery的工作代碼：

 <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(e) {
        var gFont=1;
    $('.fontAuto').click(function(e) {
        if(gFont<4){
                gFont=gFont+0.5;
        $('.fontAuto').css('font-size',gFont+'em');
        }else{
            gFont =1;
            $('.fontAuto').css('font-size','1em');
        }
    });

    });
    </script>
    <style type='text/css'>

    .fontAuto{
        font-size:1em;
    }
    </style>
    </head>
    <body>
    <p class="fontAuto">Text For testing</p>

    </body>
    </html>

Answer 3

給您一個非常簡短的答案-

<p id=p1 style="font-size:25">
    click <a href="javascript:document.getElementById('p1').style.fontSize=50">here</a> to enlarge.
</p>

如果您想點擊<p>...</p>標記的任何部分來執行此操作，請使用-

<p id=p1 style="font-size:25" onclick="this.style.fontSize=50">
    click to enlarge.
</p>

如何讓用戶通過單擊文本來增加字體大小？

問題描述

3 個解決方案

解決方案1
3 已采納 2013-10-07 17:48:55

解決方案2
0 2013-10-07 17:58:06

解決方案3
0 2013-10-07 19:02:55

根據需要自定義它。

如何讓用戶通過單擊文本來增加字體大小？

問題描述

3 個解決方案

解決方案1 3 已采納 2013-10-07 17:48:55

解決方案2 0 2013-10-07 17:58:06

解決方案3 0 2013-10-07 19:02:55

根據需要自定義它。

解決方案1
3 已采納 2013-10-07 17:48:55

解決方案2
0 2013-10-07 17:58:06

解決方案3
0 2013-10-07 19:02:55