Как разрешить пользователям увеличивать размер шрифта, щелкая текст?

0

Я пытался понять, как создать идею, которую я имел на днях на некоторое время, и, похоже, не может заставить ее работать из-за того, что все еще немного.

В любом случае, по существу, я пытаюсь создать, как говорится в заголовке, абзац, в котором пользователь может просто щелкнуть по тексту/абзацу и каждый раз увеличивать размер шрифта.

Я смог получить рабочую форму, в которой я мог бы разместить несколько вариантов, и пользователи меняются с этим размером, но это просто не то, что я хочу сделать.

Я думал, что это будет выглядеть примерно так:

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

Может ли кто-нибудь более опытный, помогите мне заставить это работать или по крайней мере поставить меня на путь, где я могу более успешно понять это сам? Заранее благодарю за любую помощь!

Теги:

3 ответа

3
Лучший ответ
<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>
Поделиться
  • 0
    вызов с javascript: resizeText (0), чтобы сохранить текущий шрифт, и вызов с javascript: resizeText (-10), чтобы уменьшить шрифт
  • 0
    userDEV, ты потрясающий, спасибо тебе большое. Не могли бы вы объяснить несколько частей этого, пожалуйста? Я бы очень хотел изучить это для себя, а не полностью срывать твой код, хаха. Главным образом, для чего используется 'tabindex = "15" accesskey = "N" "и, возможно, объясните parseFloat или любую другую часть / просто добавьте общую документацию? Если вы не можете / не хотите, хотя это не проблема, вы очень помогли, большое спасибо независимо. :)
Показать ещё 2 комментария
0

Предоставляя вам очень короткий и простой answer-

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

Если вы хотите сделать это нажатием любой части <p>...</p> use-

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

Настройте его по своему усмотрению.

Поделиться
0

Рабочий код с 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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню