Eventos e atribuição de Estilo no JavaScript

O atributo Estilo é uma das coisas mais úteis em HTML.
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.

Este tipo alteração pode ser usado durante a validação de campos, por exemplo.
Daquelas que se o usuário deixar de preencher algum campo obrigatório, a aplicação o alerta mudando sua cor pra vermelho (ou outra qualquer).

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




Alternando arquivos CSS

Alterar o nome do arquivo CSS que define o estilo pra página inteira é fácil como roubar pirulito de criança.

Nesse exemplo EBER criou 2 arquivos do tipo CSS→ estilo_exemplo_estilo1.css e estilo_exemplo_estilo2.css.
Pra alterná-los o evento OnClick de cada opção (<Input>) direciona a execução pra Atribuir. Dentro dessa rotina HRef é atribuído com o nome do arquivo CSS desejado.

<html>
  <head>
    <link id="Estilo" rel="stylesheet" type="text/css" href="estilo_exemplo_estilo1.css">
    <script type="text/javascript">
      function Atribuir (Opcao)

      {
        Estilo.href= Opcao.value;
      }
    </script>
  </head>
  <body>
    <p id="Paragrafo" class="Paragrafo">Digite qualquer m*:</p>
    <input id="Campo" class="Campo" type="text" value="LMNOP"><br><br><br><br>
    Escolha um estilo:<br>

    <input class="Opcao1" id="Opcao1" name="Grupo" type="radio" value="estilo_exemplo_estilo1.css" onclick="javascript: Atribuir (Opcao1);" checked="checked">Estilo 1
    <br>

    <input class="Opcao2" id="Opcao2" name="Grupo" type="radio" value="estilo_exemplo_estilo2.css" onclick="javascript: Atribuir (Opcao2);">Estilo 2

  </body>
</html>
Clique aqui pra abrir no navegador
Clique aqui pra baixar Estilo 1
Clique aqui pra baixar Estilo 2





http://transeberiano.brinkster.net