[RESUELTO] Problemas al cambiar estilo de un div

MauXXI · #1 (**permalink**) 13/03/2009, 17:31

Hola. Tengo esta función:

Código HTML:

function mostrar(id) {
	//Parte 1
	var obj = document.getElementById(id);
	obj.style.display=='none' ? obj.style.display='block' : obj.style.display='none';
	//parte 2
	var menu = document.getElementById(this);
	menu.style.borderColor=='#669900' ? menu.style.borderColor='#99CC00' : menu.style.borderColor='#669900';
}

La primera parte muestra y oculta in div.
La segunda parte es la que me está trayendo muchos problemas ya que hace más de 3 horas estoy con lo mismo.
A mi parecer la sintaxis está bién y el algoritmo también pero NO funciona.
Los divs están dispuesto de esta forma:

Código HTML:

<div id="1" class="li" onclick="mostrar('v');">Item1</div>
<div id="2" class="li" onclick="mostrar('n');">Item2</div>
<div id="3" class="li" onclick="mostrar('f');">Item3</div>
<div id="4" class="li" onclick="mostrar('c');">Item4</div>
<div id="5" class="li" onclick="mostrar('t');">Item5</div>
<div id="6" class="li" style="margin-right:0;" onclick="mostrar('p');">Item6</div>

Hice de todo, al principio estos divs eran <li> y pensé que ese era el probelma pero no fue asi. Le quité y le volví a colocar el atributo "id".
Este es el código CSS:

Código HTML:

.li {
	float:left;
	margin-right:5px;
	background:#006699;
	text-align:center;
	border-left:15px solid;
	border-color:#669900;
	width:107px;
	height:12px;
	padding:4px;
	cursor:pointer;
}

Busqué por todo Google, me leí todas las páginas en inglés, hasta encontré artículos de FDW pero aún no encuentro solución.

Desde ya muchas gracias a todos los que hacen posible este espacio para novatos como yo.

Saludos.

Panino5001 · #2 (**permalink**) 13/03/2009, 17:33

El this que tenés dentro de la función no es un id, es una referencia al objeto window.

MauXXI · #3 (**permalink**) 13/03/2009, 17:38

Cita:

Iniciado por Panino5001

El this que tenés dentro de la función no es un id, es una referencia al objeto window.

¿Entonces qué debo hacer para no tener que aclarar el id del objeto que deseo editar?

Quisiera que la función solo necesite el id del div a ocultar o mostrar y que cambie el color del borde del div en el que se ejecuta la función al hacer click.

No sé si me explico :S

David · #4 (**permalink**) 13/03/2009, 21:19

¿Cuál es el objetivo de esta línea?:

Código javascript:

Ver originalvar menu = document.getElementById(this);

jeybi · #5 (**permalink**) 14/03/2009, 00:54

Lo que tratan de decirte es que

var menu = document.getElementById(this);

es incorrecto, getElementById espera una string y tu le estas mandando un objeto. Supongo que lo que quieres es que cambie el border de ese div, solo necesitarias usar

this.style.borderColor=='#669900' ? this.style.borderColor='#99CC00' : this.style.borderColor='#669900';

ya que this apunta al elemento que llamo al metedo, en tu caso cada uno de esos divs.

Panino5001 · #6 (**permalink**) 14/03/2009, 02:32

Cita:

Iniciado por jeybi

Lo que tratan de decirte es que

var menu = document.getElementById(this);

es incorrecto, getElementById espera una string y tu le estas mandando un objeto. Supongo que lo que quieres es que cambie el border de ese div, solo necesitarias usar

this.style.borderColor=='#669900' ? this.style.borderColor='#99CC00' : this.style.borderColor='#669900';

ya que this apunta al elemento que llamo al metedo, en tu caso cada uno de esos divs.

En realidad, no. Cuando se aplica de esa manera, this refiere a window, no al elemento que dispara el evento:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script>
function ver(){
	alert(this)
}
</script>
</head>


<body>
<div onclick="ver()">test</div>
</body>
</html>

Si se testea en Firefox, es más claro: [object Window]. En Explorer: [object]
Y si en ambos, dentro del alert colocamos this.nodeName, devuelve undefined (si apuntara al objeto devolvería div).

MauXXI · #7 (**permalink**) 14/03/2009, 09:30

Gracias por sus respuestas.
Tienes razón Panino5001. Pero entonces ¿Cuál sería la forma correcta?

El efecto que quiero lograr es que luego de hacer click en ese div me muestre u oculte el div indicado y cambie su propio color de borde para indicar que ese div está activo.

Nuevamente no sé si me explico :P

Desde ya muchas gracias.

Panino5001 · #8 (**permalink**) 14/03/2009, 09:59

Si se trata del mismo elemento que invoca el onclick, podés hacer esto:

Código:

<div onclick=hacerAlgo(this)>hhhh</div>

Y la función hacerAlgo:

Código:

function hacerAlgo(o){
//o ahora refiere al objeto que lanzó el evento
o.style.borderColor='red';

}

Y si querés referirte al elemento padre: o.parentNode

MauXXI · #9 (**permalink**) 14/03/2009, 10:14

Muchas gracias Panino, logré que cambie el color del borde de esta forma:

Código javascript:

Ver originalfunction mostrar(id1,id2) {
    var obj = document.getElementById(id1);
    obj.style.display=='none' ? obj.style.display='block' : obj.style.display='none';
    id2.style.borderColor!='#669900' ? id2.style.borderColor='#99CC00' : id2.style.borderColor='#669900';
}

El problema es que al volver a hacer click sobre el div parece no ejecutar mas la condición. Hago el primer click, el borde cambia de color, hago el segundo click, el borde no cambia de color.

¿Por qué podrá ser?

Por cierto, vuelvo a colocar los código CSS y HTML:

Código HTML:

<ul>	
	<li id="1" onclick="mostrar('v',this);">Ítem 1</li>
</ul>

Código css:

Ver originalul {
    padding:0;
    list-style:none;
}
 
li {
    float:left;
    margin-right:5px;
    background:#006699;
    text-align:center;
    border-left:15px solid;
    border-color:#669900;
    width:107px;
    height:12px;
    padding:4px;
    cursor:pointer;
}
 
li:hover {
    border-left:15px solid;
    border-color:#99CC00;
    background:#0099CC;
}

MauXXI · #10 (**permalink**) 14/03/2009, 12:58

RESUELTO:

Luego de meter "alert(id2.style.borderColor)" por todos lados me di cuenta que javascript no detecta la configuración del css. Al usar alert antes de cambiar el color me aparecía la ventana de alerta vacía, como si el objeto no tuviese coor de borde. Una vez hecho el cambio el color del borde, al ejecutar alert, me aparecía la ventana de alerta con el valor: rgb (153, 204, 0) rgb (153, 204, 0) rgb (153, 204, 0).
Cuando pasé esos valores a hexadecimal me di cuenta que es el valor del color al que quiero que cambie.

Este es el código funcional:

Código javascript:

Ver original<script type="text/javascript">
function mostrar(id1,id2) {
    var obj = document.getElementById(id1);
    obj.style.display=='none' ? obj.style.display='block' : obj.style.display='none';
    id2.style.borderColor=='' ? id2.style.borderColor='#99CC00' : id2.style.borderColor='';
}
</script>

Código html:

Ver original<ul>    
    <li onclick="mostrar('v',this);">Ítem 1</li>
</ul>

Código css:

Ver originalli {
    float:left;
    margin-right:5px;
    background:#006699;
    text-align:center;
    border-left:15px solid;
    border-color:#669900;
    width:107px;
    height:12px;
    padding:4px;
    cursor:pointer;
}
 
li:hover {
    border-color:#99CC00;
    background:#0099CC;
}

Código:

Conclusión: Javascript NO detecta los valores pasados por un CSS externo.

Gracias a todos los que me ayudaron a resolver este "enigma"

Saludos.

Panino5001 · #11 (**permalink**) 14/03/2009, 17:01

Te felicito por haberlo resuelto (habla muy bien de vos, de verdad).
Es cierto, javascript sólo puede conocer la propiedad style cuando fue definida como tal. No obstante, hay manera de obtenerla así:

Código PHP:

  function t(id){return document.getElementById(id);}

function getStyle(id,w3cProp,IEProp){

    if(window.getComputedStyle){

        return document.defaultView.getComputedStyle(t(id),null).getPropertyValue(w3cProp);

    }else if(t(id).currentStyle){

        return t(id).currentStyle[IEProp];

    }else{

        alert('No se encontró el estilo');

    }

}

En ese caso, para obtener el borderColor, se usarían el id=id del elemento, w3cProp='border-color' y IEProp='borderColor'.