Eventos e atribuição de Estilo no JavaScript

Uma dos aprimoramentos mais úteis que fizeram no HTML foi o atributo Estilo.
Um intersítio pode ser todo configurado pra exibir-se sob várias roupagens.
O usuário pode escolher fontes, cores, imagens de fundo apenas escolhendo as opções fornecidas no próprio intersítio.
A atribuição dinâmica em si é bem fácil de se fazer. O trabalhoso mesmo é ficar definindo os estilos ao longo das páginas.

No exemplo abaixo apenas o elemento <P> é que tem o seu estilo alterado dinamicamente.

O evento onload é usado pra direcionar a rotina Listar assim que a página for carregada pelo navegador.

O evento onchange direciona a execução pra rotina Atribuir logo após a escolha duma opção no combo (<Select>).




<html>
  <head>
    <script type="text/javascript">
      function LimparSaida ()

      {
        Paragrafo.innerHTML= '';
      }

      function EnviarSaida (Linha)

      {
        Paragrafo.innerHTML+= Linha + '<br>';
      }

      function Listar (Objeto)

      {
        LimparSaida ();

        EnviarSaida ('Id: ' + Objeto.id);
        EnviarSaida ('Style.Color: ' + Objeto.style.color);
        EnviarSaida ('Style.BackgroundColor: ' + Objeto.style.backgroundColor);
        EnviarSaida ('Style.FontFamily: ' + Objeto.style.fontFamily);
        EnviarSaida ('Style.FontSize: ' + Objeto.style.fontSize);
        EnviarSaida ('Style.FontWeight: ' + Objeto.style.fontWeight);
        EnviarSaida ('Style.TextAlign: ' + Objeto.style.textAlign);
        EnviarSaida ('Style.TextDecoration: ' + Objeto.style.textDecoration);
      }

      function Atribuir (Objeto)

      {
        var Estilo, Indice;

        Indice = Selecao.selectedIndex;
        Estilo = Selecao.options.item (Indice).innerHTML;
        Objeto.style.cssText= Estilo;

        Listar (Objeto);
      }
    </script>
  </head>
  <body onload="javascript: Listar (Paragrafo);">

    <p id="Paragrafo" style="color: Red; background-color: Yellow; font-family: Arial; font-size: medium; font-weight: normal; text-align: left; text-decoration: underline;"></p>

    <br />
    Escolha um estilo:
    <select id= "Selecao" onchange="javascript: Atribuir (Paragrafo);">

      <option value="0">color: Red; background-color: Yellow; font-family: Arial; font-size: medium; font-weight: normal; text-align: left; text-decoration: underline;</option>

      <option value="1">color: Blue; background-color: Gray; font-family: Comic Sans MS; font-size: large; font-weight: bold; text-align: center; text-decoration: none;</option>

      <option value="1">color: Yellow; background-color: Black; font-family: Courier New; font-size: small; font-weight: lighter; text-align: right; text-decoration: none;</option>

    </select>
  </body>
</html>
Clique aqui pra abrir no navegador





http://transeberiano.brinkster.net