如何让用户通过单击文本来增加字体大小

How to let users increase font-size by clicking the text?

本文关键字：本来 增加 字体 文本来 用户 单击      更新时间：2023-09-26

我一直在试图弄清楚如何创建一个我前几天的想法，但由于仍然有点菜鸟，似乎无法让它发挥作用。

无论如何，切中要害，我正在尝试创建标题所说的段落，用户可以在其中简单地单击文本/段落并每次增加字体大小。

我

能够得到一个工作表单，我可以在其中放入多项选择框并让用户随之更改大小，但这根本不是我想要做的。

我以为它看起来像这样：

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

任何更有经验的人可以帮我解决这个问题，或者至少让我走上一条我可以自己更成功地解决这个问题的道路吗？提前感谢任何帮助！

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

使用 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>

给你一个非常简短的答案——

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

根据需要对其进行自定义。

相关文章：