Div que muda de classe, como fazer?

[Blanke 0]

Tenho uma <div classe="produto"></div> e to tentando fazer ela mudar de classe usando uma função externa, mas n to conseguindo por favor me deem uma luz

 

 

function produto() {

	var produtoClass = document.getElementsByTagName("div");
	
		if(produtoClass.className == "produto")
		{
			produtoClass.onmouseover=function()
			{
				this.className = "produto_hover";
			}
			produtoClass.onmouseout=function()
			{
				this.className = "produto";
			}
		}
		
window.onload = produto;

obs.: Não quero usar nem um pingo de js no html

[Leonardo P 0]

quando você usa getElementsByTagName ele cria um vetor com os elementos (e algumas outras coisas...), logo pra alterar as propriedades de um elemento você precisa especificar o índice.

 

ex: if(produtoClass[0].className == "produto") ou if(produtoClass[1].className == "produto")

[Blanke 0]

Mas eu não sei quantos produtosClass terão, como eu vou saber o índice, tem algum jeito?, eu vi em um código usando , mas não sei como poderia usar aqui

[GuttoSP 2]

JAVASCRIPT

<script>

        function mudaClass() {

                conta = document.getElementsByTagName('div');

                for (a = 0; a < conta.length; a++) {

                        document.getElementById('div['+a+']').className = "servico";

                }

        }

</script><style type="text/css">

<!--

.produto { background-color:#FF0000; }

.servico { background-color:#0000FF; }

-->

</style>

<div id="div[0]" class="produto">asdfasdfasdf asd asfas dasdf </div>

<div id="div[1]" class="produto">asdfasdfasdf asdf </div>

<div id="div[2]" class="produto">asdffasdf asd asfas dasdf </div>

<div id="div[3]" class="produto">asdfasdfasdf asfas dasdf </div>

<a href="java script:mudaClass();">asdf</a>

[Blanke 0]

Ai não tem graça, você usou javascript no html, e não posso usar id tbm

 

mas será que n tem jeito????

[klaygomes 0]

Blanke,

 

Antes de você tentar seguir padrões de desenvolvimento (uso de js não obstrutivo, separação entre as camadas e etc), não seria interessante primeiro você aprender javascript?

 

Digo isso porque, seguir estas regras, até para programadores já iniciados é dificil, imagina para quem ainda esta começando? Sei que é uma boa usar estes conceitos, mas também tem que manerá (ainda mais quando isto pode atrasar o projeto como um todo)

[aprendi isso da pior forma, por isso hoje sou adepto a campanha diga sim ao POG]

 

De qualquer forma, abaixo segue o script:

[url="http-~~-//december.com/html/4/element/script.html"]<script[/url] type="text/javascript">
window.onload =  function()
{
    var a = document.getElementsByTagName("div");       
        for(var x = 0, b = a.length; x < b; x++)
        {
                if(a[x].className == "produtoOut")
        {
                        a[x].onmouseover = function() { this.className = "produtoOver" };
                        a[x].onmouseout = function() { this.className = "produtoOut" };
                }
        
        } 
}               
</script>
[url="http-~~-//december.com/html/4/element/style.html"]<style[/url] type="text/css">
<!--
.produtoOver { background-color:#FF0000; }
.produtoOut { background-color:#0000FF; }
-->
</style>
[url="http-~~-//december.com/html/4/element/div.html"]<div[/url] class="produtoOut">asdfasdfasdf asd asfas dasdf </div>
[url="http-~~-//december.com/html/4/element/div.html"]<div[/url] class="produtoOut">asdfasdfasdf asdf </div>
[url="http-~~-//december.com/html/4/element/div.html"]<div[/url] class="produtoOut">asdffasdf asd asfas dasdf </div>
[url="http-~~-//december.com/html/4/element/div.html"]<div[/url] class="produtoOut">asdfasdfasdf asfas dasdf </div>

[Blanke 0]

Quanto a eu aprender Javascript é uma boa idéia mesmo eu não sendo programador,

ja tentei aprender mas n tenho tempo de estudar.

 

Quanto ao método "POG", sei que as vezes é preciso usar, porém acho que não deveria,

e eu não quero contribuir para isso, penso que a utilização de POG é culpa nossa, ao ver que

o tempo é curto e o dinheiro mais ainda usamos esse método.

 

Se médico não usa gambiarras pq nós podemos usar [...].

[GuttoSP 2]

Se você não quer usar javascript no code, teria que ser com um arquivo incluído. Se não servir nenhuma dessas maneiras, não resolve de outra.

[Blanke 0]

Isso sim, com certeza, tbm se não chamasse o javascript no começo da página já é querer demais

[Blanke 0]

Só pra constar, no final meu código ficou assim

 

window.onload = function () {
 var x = document.getElementsByTagName('div');
 for (var i=0;i<x.length;i++)
 {
  if (x[i].className == 'produto')
   x[i].onmouseover = function() {
	alert("Funcionou");
	}
 }
}

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[GuttoSP 2]

JAVASCRIPT

<script>

        window.onload = function () {

                var x = document.getElementsByTagName('div');

                for (var i = 0; i < x.length; i++) {

                        if (x[i].className == 'produto') {

                                x[i].onmouseover = function() {

                                        this.className = "produto_hover";

                                }

                                x[i].onmouseout = function() {

                                        this.className = "produto";

                                }

                        }

                }

        }

</script>