Tecnologia

Como mudar a cor da fonte em JavaScript

Escrito por lysis | Traduzido por lucas ourique
Como mudar a cor da fonte em JavaScript

Mude a cor das fontes de seu site usando códigos HTML

Hemera Technologies/PhotoObjects.net/Getty Images

Mudar a cor do texto em uma página de internet propicia ao usuário uma experiência atrativa e inesperada, além de ser um dos meios mais efetivos de gerar impacto no desenho de seu website. Um usuário pode mudar a cor e o estilo de seus textos usando JavaScript, a partir de diversas técnicas de códigos HTML.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

    Alterando a cor da fonte

  1. 1

    Crie elementos HTML que contenham texto. Este exemplo mostra como criar três marcações que podem usar funções JavaScript criadas nos próximos passos: <div id=\"myDiv\"> Change the color of the Div <p id=\"myParagraph\"> Change this paragraph text color. <span id=\"mySpan\">Change the span tag color </span> </p> </div>

  2. 2

    Crie a função para a marcação div. A função JavaScript seguinte anexa a marcação div criada no passo 1 e muda sua cor para vermelho: function divColorChange() { document.getElementById('myDiv').style.color = '#FF0000' GO }

  3. 3

    Mude a cor do parágrafo da marcação. A função JavaScript seguinte muda a cor do parágrafo do elemento de texto criado no passo 1 para branco: function paraColorChange() { document.getElementById('myParagraph').style.color = '#000000' GO }

  4. 4

    Mude a cor do espaçamento da marcação. Finalmente mude o espaçamento para preto com o código: function spanColorChange() { document.getElementById('mySpan').style.color = '#FFFFFF' GO }

  5. 5

    Crie botões para chamar as funções JavaScript. As funções são criadas, porém nada acontece até que as chame no código HTML. O código a seguir cria botões. Quando um usuário clica em um dos botões, a função JavaScript correspondente é chamada: <input type=\"button\" value=\"Div Color\" onclick=\"divColorChange()\" /> <input type=\"button\" value=\"Paragraph Color\" onclick=\"paraColorChange()\" /> <input type=\"button\" value=\"Span Color\" onclick=\"spanColorChange()\" />

Não deixe de ver

Comentários

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível

Direitos autorais © 1999-2014 Demand Media, Inc.

O uso deste site constitui plena aceitação dos Termos de Uso e Política de privacidade de eHow. Ad Choices pt-BR

Demand Media