Aumentar e reduzir fonte - exemplo 2

<< Click to Display Table of Contents >>

Navigation:  Aumentar e reduzir fonte >

Aumentar e reduzir fonte - exemplo 2

Previous pageReturn to chapter overviewNext page

Exemplo

 

aumentar1

 

Clicando no botão A+:

 

aumentar2

 

Html

 

<html>

<head>

  <script lang='javascript'>

 

      function getElements(className) {

          var classes = className.split(" ");

          var classesToCheck = "";

          var returnElements = [];

          var match, node, elements;

 

          if (document.evaluate) {

              var xhtmlNamespace = "http://www.w3.org/1999/xhtml";

              var namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace) ? xhtmlNamespace : null;

 

              for (var j = 0, jl = classes.length; j < jl; j += 1)

                   classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";

              try {

                   elements = document.evaluate(".//*" + classesToCheck, document, namespaceResolver, 0, null);

               }

              catch (e) {

                   elements = document.evaluate(".//*" + classesToCheck, document, null, 0, null);

               }

              while ((match = elements.iterateNext()))

                   returnElements.push(match);

           }

          else {

               classesToCheck = [];

               elements = (document.all) ? document.all : document.getElementsByTagName("*");

 

              for (var k = 0, kl = classes.length; k < kl; k += 1)

                   classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));

 

              for (var l = 0, ll = elements.length; l < ll; l += 1) {

                   node = elements[l];

                   match = false;

                  for (var m = 0, ml = classesToCheck.length; m < ml; m += 1) {

                       match = classesToCheck[m].test(node.className);

                      if (!match) break;

                   }

                  if (match) returnElements.push(node);

               }

           }

          return returnElements;

       }

 

      // esta função obtem a informacao sobre um estilo de um elemento

      // por exemplo: getStyle(elemento, 'font-size') = '12.5em'

      function getStyle(oElm, strCssRule) {

          var strValue = "";

          if (document.defaultView && document.defaultView.getComputedStyle) {

               strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);

           }

          else if (oElm.currentStyle) {

               strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1) {

                  return p1.toUpperCase();

               });

               strValue = oElm.currentStyle[strCssRule];

           }

          return strValue;

       }

 

      function bolha(className, opcao) {

 

          // obtem todos elementos que fazem parte desta "classe"

           elements = getElements(className);

 

          // percorre os elementos

          for (var i = 0; (element = elements[i]) != null; i++) {

 

              // obtem o tamanho atual deles

              var tamanho = parseFloat(getStyle(element, "font-size"));

              // +4 ou -4

              if (opcao == '+')

                   tamanho += 4;

              else

                   tamanho -= 4;

              // retorna o tamanho

               element.style.fontSize = tamanho;

           }

       }

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

       Já este texto não será alterado

  </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(bolha('tess', '-'))">

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

    </a>

    <a href="javascript:void(bolha('tess', '+'))">

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

    </a>

</body>

</html>