transEBERiano - Atribuir estilo dinamicamente JavaScript

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>).

Exemplo

      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="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="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>

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.

Exemplo

      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="Atribuir (Opcao1)" checked="checked">Estilo 1
    <br>

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

  </body>
</html>

Abrir no navegador

Estilo 1

Estilo 2

http://transeberiano.brinkster.net