Desenvolvimento

Teste 9 - Alterações Dinâmicas na CSS

A CCS dinâmica: é possível controlar dinamicamente as configurações CSS na janela do browser fazendo alterações nos estilos ou nas classes dos objetos, sendo essas alterações imediatamente visíveis.

Alterando uma Definição (Estilo) Através do ID

Ao passar o mouse sobre o texto da caixa abaixo, algumas de suas propriedades CSS são alteradas.

Horrorfilm | Carrie - Des Satans Jüngste Tochter

Mrs. White jedoch hat allerhand dagegen, daß ihre Tochter an einem Tanzvergnügen teilnimmt. Als sie Carrie deswegen eine Szene macht, erkennt das Mädchen, daß es über telekinetische Fähigkeiten verfügt: sobald es sich erreigt, kann es mit Geisterkraft Gegenstände in Bewegung versetzen.

Eis os trechos cruciais do código desta parte:

<head>
   <style type='text/css'>
      #deutsch_1 {font-size: 12px; position: relative; font-weight: bold; margin-right: 20px}
      #deutsch_2 {font-size: 18px; position: relative; color: #f00; margin-left: 20px}
      #deutsch_3 {font-size: 10px; position: relative}
   </style>

   <script type="text/javascript" src='../js/findDOM.js'></script>
   <script type="text/javascript">
      function changeStyle(objectID,styleName,newVal) {
         var dom = findDOM(objectID,1)
         dom [styleName] = newVal
      }
   </script>
</head>

<body>
   <span id="deutsch_1" onmouseover="changeStyle('deutsch_2','fontSize','10px');
      changeStyle('deutsch_3','fontSize','10px');
      changeStyle('deutsch_3','fontWeight','normal');
      this.style.fontSize = '18px'">Horrorfilm</span>
   |
   <span id="deutsch_2" onmouseover="changeStyle('deutsch_1','fontSize','10px');
      changeStyle('deutsch_3','fontSize','12px');
      changeStyle('deutsch_3','fontWeight','bold');
      this.style.fontSize = '18px'">Carrie - Des Satans Jüngste Tochter
   </span>
   <div id="deutsch_3">
      Mrs. White jedoch hat allerhand ...
   </div>
</body>

A função findDom() deve sempre ser usada para referenciar objetos na tela, sendo então incluída no documento.

A função changeStyle() cria um DOM a partir do id do objeto a ser alterado (variável objectID). O DOM é utilizado para alterar o estilo especificado por styleName de acordo com o novo valor (newVal).

Neste exemplo, o evento onmouseover dispara a função changeStyle(). A função recebe a especificação do id do objeto a ser alterado, o estilo e seu novo valor. Nota-se que os nomes de estilo, no javaScript, são formados de maneira diferente da especificação CSS padrão. No JavaScript, as palavras não podem incluir pontos, hífens ou qualquer outro separador. A propriedade font-size, por exemplo, deve ser escrita como fontSize. A regra geral no JavaScript é, portanto, que todas as letras devem aparecer minúsculas, exceto pela primeira letra de todas as palavras que vêm depois da primeira palavra.

Alterando a Classe de um Objeto

A movimentação do mouse sobre o texto abaixo exemplifica o uso da modificação de classes de objetos.

Lindinha | Palavras da Ex-Musa do Site Kollision

Tô cum vontade de comer a sopa de cançanção que minha vozinha fasia quando eu era guria, lá em Auto Coité. Tô cum tanta saldade de todo mundo lá... Tonha, Zé da Macacheira, Manel... Bão, agora sou uma esecutiva bem sussedida de um site de internet, então minha realidade é outra. Tive que deichar meu paçado para tráz e, acim, acabei me dezligando das antigas amisades. É a vida, faser o quê, né?

Eis os trechos cruciais do código desta parte:

<head>
   <style type='text/css'>
      .big_font {font-size: 18px; position: relative; font-weight: bold}
      .medium_font {font-size: 10px; position: relative; font-weight: bold; color: #00f}
      .small_font {font-size: 8px; position: relative; color: #000}
   </style>
   <script type="text/javascript" src='../js/findDOM.js'></script>
   <script type="text/javascript">
      function setClass(objectID,newClass) {
         var dom = findDOM(objectID,0)
         dom.className = newClass
      }
   </script>
</head>

<body>
   <span id="lindinha_1" class="big_font" onmouseover="setClass('lindinha_3','small_font');
      setClass('lindinha_2','medium_font');
      this.className = 'big_font'">Lindinha</span>
   |
   <span id="lindinha_2" class="medium_font" onmouseover="setClass('lindinha_1','medium_font');
      setClass('lindinha_3','big_font');
      this.className = 'big_font'">Palavras da Ex-Musa do <em>Site</em> Kollision</span>
   <div id="lindinha_3" class="small_font">
      Tô cum vontade de comer a sopa de cançanção que minha ...
   </div>
</body>

Desta vez, ao invés de acessar um estilo, a função findDom() é usada para acessar uma propriedade específica da tag afetada, a propriedade class. Referenciar a propriedade class requer o uso da sintaxe className, como mostrado no código do exemplo. Atenção para a diferença entre o uso de dom.className e dom [styleName], mostrado no exemplo mais acima.

Tudo o que a função setClass() faz é modificar a classe do id definido pelo seu primeiro argumento para a classe especificada no segundo argumento.