Propriedade Classname

#1 Without a Nick

Sem culpa no cartório

Usuários
2378 posts

Sexo:Não informado
Localidade:Guarulhos

Posted 02/07/2004, 17:06

Como eu prometi no tópico pendurado desta seção, tentarei explicar algumas propriedades, métodos, eventos, dentre outros.

Hoje vou explicar a propriedade className.

Como ela funciona?

Essa propriedade é a responsável pelas folhas de estilos (CSS) de uma página da Web, através de uma conexão com o atributo class de uma tag.

Olhe um exemplo:

<style type="text/css">

</style>
<input type="text" class="um" onfocus="this.className='dois';" onblur="this.className='um';">

Digite um texto no input. Será um texto na cor vermelha (red). Quando você retirar o foco do objeto, ele ficará azul.

OU seja, o className fará com que ocorra a transição entre classes CSS.

Primeiro, é preciso colocar o nome do objeto antes de mais nada, juntar o className e definir o nome de uma classe no CSS.

Logo, a sintaxe dessa propriedade é a seguinte:

objeto.className='classe';

Com o id (representado pelo sustenido # no CSS), você pode fazer a mesma coisa, mas será preciso definir um id na tag e se segue na mesma linha de raciocínio, mas para o id, não se pode usar o className.

Ok? Obrigado.

#2 Guilherme Blanco

Conselheiros
891 posts

Sexo:Masculino
Localidade:São Carlos - SP/Brasil
Interesses:Programação Web e minha namorada (Maria Camila).

Posted 03/07/2004, 15:22

Agora vem a minha parte, Fernando.... =D

Valor: String de um caractere

Tipo: Leitura/Escrita

Compatibilidade:
IE4+
NN6+
Mozilla
Opera7+

Descrição:
A propriedade className de um elemento permite a aplicação de diferentes regras da CSS a esse elemento sob controle do script.

Exemplo:

Definição da regra CSS:

<style type="text/css">
.regra { text-decoration: none; }
</style>

Aplicando a regra ao elemento:

<html>
  <head>
    <title>Propriedade className - por Guilherme Blanco</title>
    <style type="text/css">
      .regra-padrao { text-decoration: underline; }
      .regra { text-decoration: normal; }
    </style>
    <script type="text/javascript">
      function alteraCSS() {
        document.getElementById('teste').className = 'regra';
      }
    </script>
  </head>

  <body>
    <span id="teste" class="regra-padrao">Texto que muda de seletor CSS após clique no botão abaixo</span>
    <br />
    <input type="button" value="Altera CSS" onclick="alteraCSS();" />
  </body>
</html>

Attached Files

className.html 610bytes 39 downloads

Edição feita por: Guilherme Blanco, 03/07/2004, 15:22.

#3 Without a Nick

Sem culpa no cartório

Usuários
2378 posts

Sexo:Não informado
Localidade:Guarulhos

Posted 03/07/2004, 15:29

Acabou com o meu barato, mas tudo bem.

Vamos continuar fazendo esses negócios... Aí nós atualizamos a lista do tópico pendurado.

#1 Without a Nick

#2 Guilherme Blanco

Attached Files

#3 Without a Nick

0 user(s) are reading this topic

Entrar