- document.getElementById("id").style.class = "NovaClasse";
Talvez seja muita inocência da minha parte em ainda não conhecer o metodo correto, porém realmente tentei da forma como citei acima e pude comprovar que não funciona (rsrs). Depois de uns 5 minutos googling pela net encontrei a solução, assim como mostro abaixo:
- document.getElementById("id").setAttribute("class","Nome_da_class_css");
Testei no FireFox e funcionou perfeitamente. Acreditando que meu problema havia sido resolvido fui testar no Internet Explorer, percebi que este código para o Browser da Microsoft não realiza modificação alguma em meu elemento. Com mais 5 minutos googling descobri que para o Internet Explorer eu precisava implementar a mesma coisa com uma ligeira diferença, no primeiro argumento de SetAttribute eu devo informar className, assim como demonstro abaixo:
- document.getElementById("id").setAttribute("className","Nome_da_class_css");
Fiz o teste é funcionou para o IE, o meu único problema é que agora tenho um código para o IE e outro para o FF, como conseguir um código cross-browser?
Não encontrei um único código compatível com os dois browsers mais famosos, mas contornei com a seguinte função em JavaScript:
function ChangeClass(objAttrib,NameClass)
{
//Tratamento para FF
if ((!document.all)&&(document.getElementById))
{
objAttrib.setAttribute("class",NameClass);
}
//Tratamento para I.E
if ((document.all)&&(document.getElementById)){
objAttrib.setAttribute("className",NameClass);
}
}
A utilização da função acima é bem simples, segue um exemplo:
- ChangeClass(document.getElementById("Nome_Elemento"),"Nome_classe_css");
Essa implementação funcionou perfeitamente para os dois browsers (IE e FF), não testei para Safari, Opera e outros browsers menores, caso alguém faça estes testes peço que postem dizendo o que houve.
Para finalizar gostaria de demonstrar toda colcha de retalhos montada, num único script simples.
<html>
<head>
<title>Exemplo - Mudar Classe CSS com JavaScript</title>
<style>
.estilo1
{
font-family: verdana;
font-size: 14px;
color: blue;
cursor: pointer;
}
.estilo2
{
font-family: Arial;
font-size: 28px;
font-weight: bold;
color: green;
cursor: pointer;
}
</style>
<script>
function ChangeClass(objAttrib,NameClass)
{
//Tratamento para FF
if ((!document.all)&&(document.getElementById))
{
objAttrib.setAttribute("class",NameClass);
}
//Tratamento para I.E
if ((document.all)&&(document.getElementById))
{
objAttrib.setAttribute("className",NameClass);
}
}
</script>
</head>
<body>
<span id="texto" class="estilo1" onclick="ChangeClass(document.getElementById('texto'),'estilo2');">Texto formatado por CSS</span>
</body>
</html>
Bom pessoal, é isso aí.. por hoje é só! Espero ter ajudado!
----
Leonardo Todeschini
Professional Services
OSS/BSS/Software Integration Practice
Alcatel-Lucent S/A (Brazil)
leotodeschini@gmail.com
Nenhum comentário:
Postar um comentário