Aumentar e reduzir fonte

<< Click to Display Table of Contents >>

Navigation:  »No topics above this level«

Aumentar e reduzir fonte

Previous pageReturn to chapter overviewNext page

Exemplo

 

aumentar1

 

Clicando no botão A+:

 

aumentar2

 

Html

 

<html>

<head>

 

<script language='javascript'>

 

var min=8;

var max=18;

 

function changeFontSize(opcao) {

   

   // pega todos elementos deste tipo 

   var p = document.getElementsByTagName('div');

   

   // percorre-os

   for(i = 0; i < p.length; i++) {

 

      if(p[i].style.fontSize) {

         var s = parseInt(p[i].style.fontSize.replace("px",""));

      } else {

         var s = 12;

      }

 

      if (opcao=='+') {

        if(s!=max) { s += 1; }

     } else {

        if(s!=min) { s -= 1; }

     }

      p[i].style.fontSize = s+"px"

   }

}

 

</script>

</head>

<body>

    <div class="tess" style="font-size: 12">

        Este exemplo mostra como aumentar ou diminuir a fonte dentro de um div<br>

        Pressione o botãozinho com um A com sinal de menos para diminuir este texto<br>

        Pressione o outro botãozinho com um "A" e o sinal de mais para aumentar este texto<br>

        Todo o texto dentro da ID especificada irá aumentar junto

    </div>

    <br>

    <br>

    <div class="tess2" style="font-size: 12">

        <p>Já este texto não será alterado</p>

    </div>

    <br>

    <br>

    <div class="tess" style="font-size: 10">

        Este

        <h1>

            exemplo</h1>

        mostra como <i>aumentar</i> ou diminuir a fonte dentro de um div<br>

        <p>

            Pressione o botãozinho com um A com sinal de menos para diminuir este texto</p>

        <br>

        <strong>Pressione</strong> o outro botãozinho com um "A" e o sinal de mais para

        aumentar este texto<br>

        Todo o texto dentro da

        <h2>

            ID</h2>

        especificada irá aumentar junto

    </div>

    <br>

    <br>

 

 

 

    <a href="javascript:void(changeFontSize('-'))">

        <img src="https://www.csums.com.br/banescard/Images/Diminuir_Letra.png" hspace="0" border="0">

     </a>

     <a href="javascript:void(changeFontSize('+'))">

        <img src="https://www.csums.com.br/banescard/Images/Aumentar_Letra.png" hspace="0" border="0">

     </a>

</body>

</html>