Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

pixer

[Resolvido] Efeito utilizando DOM

Por , em Javascript

Recommended Posts

pixer    0

pixer
Postado

Eae galera !

seguinte:

 

sou bem burro em JS mas como estou estudando resolvi fazer esse efeitinho pra experimentar.

estou querendo fazer um efeito simples usando DOM. o objetivo seria adicionar e remover um classe de uma tag.

o problema é que a cada clique, a classe é adicionada e o certo seria: um clique adiciona e outro clique remove a classe

 

aqui vai o source

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		
		<!-- CSS --> 
			<link type="text/css" rel="stylesheet" href="css/default.css" />
		<!-- FIM CSS -->
		
		<!-- JS -->
			<script type="text/javascript" defer="defer">
			
				function bgcolor(){
					div1 = document.getElementById("div1").className += " divtest_bg1";
					if(div1.className(" divtest_bg1")){
					    div1.className -=" divtest_bg1";	
					}
				}
			</script>
		<!-- FIM JS -->
	</head>
	<body>
		<div id="div1" class="divtest">
        
        </div>
        <ul>
        	<li><a href="#"	onClick="bgcolor()">change color</a></li>
           
        </ul>
	</body>
</html>

agradeço ai quem puder me dar uma ajuda

 

abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

pixer    0

pixer
Postado

Use element.getAttribute() e seus familiares. No onclick faça um if para ver se o elemento que recebeu o clique tem aquele atributo. Se não tiver, ponha, se tiver, tire.

 

desculpa Thiago, ach oque não expliquei bem.

na verdade o que eu quero remover e adicionar é a classe css e não o atributo class ex:

 

quando clica - <div id="div1" class="divtest divtest_bg1"> a classe divtest_bg1 no caso vai trocar a cor da div

 

clicou denovo - <div id="div1" class="divtest"> volta a cor original

Compartilhar este post

Link para o post
Compartilhar em outros sites

pixer    0

pixer
Postado

na verdade não seria trocar, quero adicionar a classe divtest_bg1 quando clicar

e verificar se ela ja estiver setada lá no atributo class, remove-la, bem como eu coloquei acima

 

 

quando clica - <div id="div1" class="divtest divtest_bg1"> a classe divtest_bg1 no caso vai trocar a cor da div

 

clicou denovo - <div id="div1" class="divtest"> volta a cor original

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Não entendi...

 

Vê se é isso o que quer:

 

HTML

<p id="text">Teste</p>
CSS

p#text{
	background: red;
}
JavaScript

window.onload = function(){
	var p = document.getElementById("text");
	p.onclick = function(){
		if(this.getAttribute("id")) this.removeAttribute("id");
		else this.setAttribute("id", "text");
	};
};

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado

Olá Pixer,

Já que você está estudando observe o seguinte no seu script.

 

A função começa atribuindo à variável div1 o valor da classe concatenado com divteste_bg1

resultando em: div1 = divtest divteste_bg1, ou seja div1 é uma string.

 

Na linha seguinte vem o primeiro erro:

div1.className não existe a propriedade className para uma string!

 

Na linha seguinte o erro se repete e há mais um erro:

O operador -= espera valores numéricos e não strings.

Realmente += concatena strings, contudo -= não é para "desconcatenar".

 

Refaça seu script e volte a postar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

pixer    0

pixer
Postado

OK pessoal, arranjei um jeito de fazer esse script acontecer

 

quem quiser olhar, pra entender, dizer se pode ficar mais simples eu agradeço

 

aqui vai o source

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		
		<!-- CSS --> 
			<link type="text/css" rel="stylesheet" href="css/default.css" />
		<!-- FIM CSS -->
		
		<!-- JS -->
			<script type="text/javascript" defer="defer">
			    
				function bgcolor(){
				     
				    var div1 = document.getElementById("div1").className ; 
				  
					if(div1 == "divtest divtest_bg1") {
					    document.getElementById("div1").className = "divtest";
					    
					} 
					if(div1 == "divtest") {
					   document.getElementById("div1").className = "divtest divtest_bg1";
					}
					
				}
			</script>
		<!-- FIM JS -->
	</head>
	<body>
		<div id="div1" class="divtest">
        
        </div>
        <ul>
        	<li><a href="#"	onClick="return bgcolor();">change color</a></li>
           
        </ul>
	</body>
</html>

valeu a todos pela força ae

 

:)

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Algo assim:

<script type="text/javascript" defer="defer"> 
function bgcolor(){
	var el = document.getElementById('div1'); 

	if( el.className == 'divtest' )
		el.className += 'divtest_bg1';
	else
		el.className = el.className.replace(' divtest_bg1', '');;
}
</script>
?

Compartilhar este post

Link para o post
Compartilhar em outros sites

pixer    0

pixer
Postado

Ótimo! ficou legal.

Agora tente retirar JavaScript da marcação.

o onclick="return bgcolor();" deve sair da HTML.

<li><a href="#" onclick="return bgcolor();">change color</a></li>

Vou pesquisar, mas admito que não tenho idéia de como iso possa funcionar

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito