Mudar o atributo de classe de um elemento HTML usando JavaScript permite aos desenvolvedores criar efeitos interativos dentro de sites. Usando uma função JavaScript, você pode determinar o comportamento deve ter lugar quando os usuários interagem com os elementos da página , alterando suas propriedades de estilo CSS em resposta a esta interação. Alterando nomes de atributos de classe é uma das principais técnicas envolvidas nesta tarefa, que é viável mesmo para as pessoas apenas começando no desenvolvimento web. Instruções
1
Criar sua página HTML com elementos para exibir o conteúdo. Abra um novo arquivo em um editor de texto e salve-o com o " html ". Como a extensão , inserindo o seguinte código:
Olá
< br >
Isso simplesmente cria uma página web com um único elemento HTML na mesma. O elemento foi atribuído um atributo de classe com o nome de "off ". Isso indica que o estado do elemento quando o usuário não tem o seu cursor do mouse sobre ele .
2
Crie seu código CSS. Abra um novo arquivo em um editor de texto e salve-o como " interactivestyle.css " para refletir o objetivo da tarefa que está sendo executada. . Digite o seguinte código :
fora . {
Color: # FF0000 ;}
sobre {
color: # 0000FF ;}
Adicione um link para o arquivo CSS na seção head de sua página HTML, entre a abertura e fechamento de tags de cabeça :
< link rel = tipo de " estilo " = "text /css" href = " interactivestyle.css " />
3
Crie duas funções de JavaScript na seção head de sua página , antes ou após o link para o arquivo CSS:
sua página vai alterar o estilo do elemento quando o usuário move o mouse sobre ela e fora dela. A função separada é necessária para processar cada um desses eventos do usuário.
4
Localize os elementos dentro de suas funções de JavaScript e mudar seu nome atributos de classe . Altere suas duas funções de JavaScript da seguinte forma:
função overElement ( elemRef ) {
//mouse está sobre o elemento
document.getElementById ( elemRef ) className = " over. "; .
}
função offElement ( elemRef ) {
//mouse está fora do elemento
document.getElementById ( elemRef ) className =" off " ;
}
Este código em cada função localiza o primeiro elemento em questão usando o atributo ID que foi passado como um parâmetro , em seguida, altera o nome da classe em conformidade
< . br> 5
Chame seus funções dentro do seu conteúdo HTML. Sua página tem que "ouvir" para interação com o usuário , chamando as funções de JavaScript quando isso ocorre. Alterar o seu elemento HTML da seguinte forma:
Olá < /div >
Isso atribui um atributo ID para o elemento , passando-a para cada função quando o usuário move o mouse ou desligar a área. Salve seus arquivos e abra a página HTML em um navegador da Web, movendo o mouse sobre e fora o elemento a testar a funcionalidade .
