3 de out de 2012

Javascript: Como mudar a fonte, tamanho e cor de texto, usando um link

Em mais uma série de tutoriais Javascript de Abelhudos da informática, estarei ensinado hoje a criar um link que mudará elementos da formatação do seu texto:

Fonte, tamanho, alinhamento e cor.


A seguir, estarei mostrando cada elemento que será modificado.

Todos os códigos abaixo tratarão de alterações do elemento DIV do html; portanto, é indispensável que se digite o seu texto dentro dessa tag.


Código Javascript para mudar Fonte

Logo abaixo, esse será o código para mudar o tipo de fonte (arial, tahoma, times new roman).

O nosso código a seguir mudará a fonte de Tahoma para Courier New.


Esses são os links que mudarão o tipo de fonte, sendo que um muda para Courier New, e o outro, para Tahoma:


Esse é o resultado do código acima:

Abelhudos da informática
Testando a fonte a ser mudada
Tahoma será mudada para courier new


Se você quiser alterar o nome da fonte do item onclick="document.getElementById('fonte').style.fontFamily='tahoma';", você poderá personalizar o tipo de fonte que será mudada em seu blog ou site.


Código Javascript para mudar a Cor da Fonte

Nesse código a seguir, veremos agora como alterar a cor do texto do seu blog.

Veja que a construção do elemento mostrado agora será o mesmo mostrado acima, tendo a diferença apenas no link que irá alterar a propriedade e no Id, que é o ponto essencial para o chamamento dessa função Javascript.


código dos links para mudar a cor:


Esse é o resultado do código acima:

Abelhudos da informática
Testando a fonte a ser mudada
Aqui será mudada a cor da fonte



No caso das cores da fontes, você poderá configurar no atributo 'red' as cores que não são reconhecidas por fontes, e sim por código.

Exemplo: substitua 'red' no código dos links que alterarão a cor da fonte para '#7B68EE'.


Você poderá ver uma lista de códigos para cores nesse link: Tabela de cores HTML.

Código Javascript para mudar o tamanho da fonte


Agora, vejamos o código para alterar o tamanho da fonte.



Código do Link para mudar o tamanho:


Abelhudos da informática
Testando a fonte a ser mudada
Aqui será mudado o tamanho da fonte



Você também poderá alterar o código acima à vontade, sendo que, se você quiser um tamanho  maior do que 20px, você deverá trocar o elemento do link que altera o tamanho de '20px' para um número personalizado, ou seja,  'númeropx'.

Observação: Se você colocar um valor menor no link que retornará o texto ao tamanho original, isso fará que a exibição se torne menor do que o valor encontrado anteriormente antes de ser alterado. (creio que não é isso que você quer).

Código Javascript para mudar alinhamento da DIV em que está seu texto

A seguir, vem o nosso código Javascript para o alinhamento da sua fonte.

Lembrando novamente que a sua fonte só será alterada se seu texto estiver escrito dentro da tag correspondente a ela (<div id="alinhamento"> e </div>).




Segue abaixo o código de quatro links que alterarão os atributos Center (Centro), Justify (Justificado), Left (Esquerda), Right (Direita).


Finalmente, o resultado do nosso último código:

Abelhudos da informática
Testando a fonte a ser mudada
Esse código Javascript mudará o seu alinhamento



Esse código basicamente não necessitará de alterações.


Explicando um pouco do código

Se você ainda não entendeu algum dos elementos, ensinarei aqui alguns.

getElementById - Esse código é responsável por reconhecer um elemento HTML da sua página através da Id. Quando você usa, por exemplo, a Id="teste" na DIV, você poderá mudar algum atributo dela através de um outro elemento HTML (que são os elementos que "chamam" o Id e efetua a mudança configurada em getElementById.

Se você for usar códigos para alteração de elementos da sua página como nesse tutorial, sempre terá que escrever esse código com "document" antes. (observação: não sou nenhum expert em Javascript, mas aprendo tudo rápido como abelhudo que sou).

onclick - Esse é o código usado toda vez que você desejar iniciar um evento através do clique do mouse.
Existem outros códigos que inciam um evento no Javascript:

onblur - quando o objeto perde o foco.
onfocus - quando o objeto recebe o foco.
onload - quando a página termina de ser carregada.

Ainda existem outros, mas esses vocês poderão encontrar em Cursos Javascript Online.

href="Javascript: void(0)" - esse código é usado quando não se tem um link a carregar em HREF, sendo que usa-se Javascript: void(0) para que o navegador permaneça na mesma página ao clicar nesse link.

Espero que as dicas tenha sido úteis. Não se esqueça de deixar seu comentário.
Wallace Maxters

Sobre o autor

Wallace de Souza Vizerra, Wallace Maxters , é um amante da informática e criou esse blog para ajudar as pessoas a solucionar problemas comuns do seu PC, além de compartilhar diversas curiosidades sobre esse fantástico mundo da computação.




Obrigado pelo seu comentário, é muito importante para o blog.

Regras de moderação:

- Não serão publicados comentários que contenham spam, nem os que pedem vistas a sites que não tenham a ver com o conteúdo do post.
- Não use palavras de baixo meretrício; você pode enfatizar seu comentário sem usar palavrões.
- Se você não possui uma das contas necessárias para comentar, basta usar as opções anônimo ou nome/url . E lembre-se que ser anônimo não é ser mal educado.

3 comentários :

  1. ou valeu ajudou bastante aqui na aula do senai

    ResponderExcluir
  2. como faço para colocar imagens dentro da sala de bate papo do Kboing?

    ResponderExcluir