Script que adiciona um link para que o usuário aumente o tamanho da fonte do texto, e outro link para que o usuário diminua o tamanho da fonte do texto.
Fonte: http://www.yogodoshi.com/blog/utilitarios/script-para-o-usuario-poder-aumentar-e-diminuir-a-fonte-do-site
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script type="text/javascript"> // Início do código de Aumentar/ Diminuir a letra // Para usar coloque o comando: // "javascript:mudaTamanho('tag_ou_id_alvo', -1);" para diminuir // e o comando "javascript:mudaTamanho('tag_ou_id_alvo', +1);" para aumentar var tagAlvo = new Array('p'); //pega todas as tags p// // Especificando os possíveis tamanhos de fontes, poderia ser: x-small, small... var tamanhos = new Array( '9px','10px','11px','12px','13px','14px','15px' ); var tamanhoInicial = 2; function mudaTamanho( idAlvo,acao ){ if (!document.getElementById) return var selecionados = null,tamanho = tamanhoInicial,i,j,tagsAlvo; tamanho += acao; if ( tamanho < 0 ) tamanho = 0; if ( tamanho > 6 ) tamanho = 6; tamanhoInicial = tamanho; if ( !( selecionados = document.getElementById( idAlvo ) ) ) selecionados = document.getElementsByTagName( idAlvo )[ 0 ]; selecionados.style.fontSize = tamanhos[ tamanho ]; for ( i = 0; i < tagAlvo.length; i++ ){ tagsAlvo = selecionados.getElementsByTagName( tagAlvo[ i ] ); for ( j = 0; j < tagsAlvo.length; j++ ) tagsAlvo[ j ].style.fontSize = tamanhos[ tamanho ]; } } // Fim do código de Aumentar/ Diminuir a letra </script> </head> <body> <a href="javascript:mudaTamanho('texto', -1);">Diminuir</a> <a href="javascript:mudaTamanho('texto', 1);">Aumentar</a> <div style="font-size: 11px;" id="texto"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur scelerisque purus ut pede. Ut pulvinar diam vitae tellus. Nunc ultricies. Nam rhoncus justo vel dui. Morbi suscipit enim. Praesent dui dui, tincidunt eget, feugiat vel, tincidunt vel, elit. Curabitur tempus consequat nunc. Aliquam erat volutpat. Vivamus a massa non libero posuere blandit. Nulla ut velit quis leo luctus tincidunt. Vestibulum eget leo in augue ornare fringilla. Suspendisse suscipit dui. </p> <p>Nullam ultrices justo eget mi. Curabitur porta augue eget magna. Nam imperdiet, ipsum eu aliquet interdum, justo ipsum pulvinar quam, quis convallis mi sapien eu ante. Etiam ac sem. Ut bibendum. Nulla facilisi. Vestibulum odio. Sed accumsan. Donec a dui. Cras lorem augue, egestas vel, accumsan vel, elementum sit amet, nisl. Cras id dui. Sed nulla ipsum, pulvinar et, suscipit a, vehicula eu, arcu. Fusce auctor nibh eget risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vitae ante in odio dapibus lobortis. </p> </div> </body> </html>
novembro 3rd, 2012 on 19:28
Não funciona
novembro 6th, 2012 on 16:54
Carlos, testei de novo e funcionou perfeitamente. Você copiou o código completo?
novembro 14th, 2012 on 21:07
Fiz o seguinte e resolveu:
Copie tudo e, ao invés de jogar diretamente no Dreamweaver ou no Namo (uso os dois), colei primeiro no bloco de notas. A partir daí, copiei de novo, colei no programa e funcionou.
Grato.
C.
novembro 20th, 2012 on 09:09
Isso. É uma boa prática. 🙂
Quando você joga direto para o Dreamweaver. ele pode levar junto algumas coisas que não interessam (caracteres estranhos, formatação etc.)
Se você jogar no bloco de notas (gedit ou pluma se estiver no Ubuntu/Mint), a formatação é limpa, evitando erros.
novembro 28th, 2012 on 21:58
Muito bacana, testei e 100% funcional.
Muito obrigado era isso que estava procurando, parabéns amigo…
Flwwww
janeiro 8th, 2018 on 16:18
Valeu coleira o código funciona perfeitamente acabei de fazer o texte e deu tudo certo obrigado por postar este script colega.
até mais.