[SOLUCIONADO] Problema con Visibility y Display en JS

[s3t3r]

Hola a todos, tengo el siguiente inconveniente, con JavaScript no puedo acceder a las propiedades de style.visibility ni style.display de la hoja de estilos CSS. por ejemplo:

en el CSS tengo algo así:

Código:

#contenedor{visibility:hidden; width:100%; heigth:100%; background:blue;}

en el JS tengo una función asi:

Código:

function visibles()
  {
	var current = document.getElementById("contenedor").style.visibility;
      if( current == "visible" )
       {
         document.getElementById("contenedor").style.visibility= "hidden";
       }
       else
       {
         document.getElementById("contenedor").style.visibility= "visible";
       }
  }

en el HTML tengo algo asi:

<div id="contenedor">algún contendio</div>
<p onclick="visibles()">Haz clic para ver contenido</p>

Cuando hago un clic al P este llama a la función visibles(), pero no hace nada, recién al segundo clic se realiza la función de mostrar el contenedor, es decir, JavaScript no puede encontrar el estado de visibilidad del contenedor al llamar por primera vez a la función.

Lo extraño es que si en el HTML yo agrego el style, la función se ejecuta correctamente, es decir, si coloco esto en el HTML <div id="contenedor" style="visibility:hidden;">algún contenido</div> al hacer el primer clic al P, JavaScript resuelve sin problemas el estado de visibilidad del contenedor.

Esto me lleva a suponer que por algún motivo JavaScript no puede resolver el estado de visibilidad o de display de los elementos del DOM que obtengan sus estilos del CSS.

Ya he comprobado con http://validator.w3.org/ el código HTML, con http://jigsaw.w3.org/css-validator/ el código CSS y con Firebug de Firefox el código JS y todo esta perfecto, no hay ningún error, la consola no muestra ningún error, es totalmente extraño.

por ejemplo, si agrego esta función al JS con un alert, al iniciar el sitio me devuelve vacio pero sin ningún error, la función seria

Código:

window.onload = function(){ alert(document.getElementById('contenedor').style.visibility)}

Es un error muy extraño y muy difícil de expresar, sepan disculpar.

Desde ya muchas gracias!

[IsaBelM]

puedes leer el css computado

[jp91]

Como funciona el navegador e interpreta http://www.html5rocks.com/es/tutoria...wbrowserswork/

Estas intentando acceder a una propiedad del elemento (element.style)la cual no existe puedes usar la consola de chrome y lo entenderas, entonces cuando presionas click entras en if el cual sera falso y apenas se le asignara el estilo "visible", por eso si agregas la regla directamente entonces si funciona.

[s3t3r]

Iniciado por jp91

Como funciona el navegador e interpreta [url]http://www.html5rocks.com/es/tutorials/internals/howbrowserswork/[/url]

Estas intentando acceder a una propiedad del elemento (element.style)la cual no existe puedes usar la consola de chrome y lo entenderas, entonces cuando presionas click entras en if el cual sera falso y apenas se le asignara el estilo "visible", por eso si agregas la regla directamente entonces si funciona.

Si, comprendo como funciona, tal vez no leíste bien lo que exprese, puse la función window.onload =... lo que hace que cuando se cargue todo el sitio recién se ejecute, es decir, ya todo el sitio tendrá asignado el estilo CSS, sus Identificadores y Classes, en realidad no es el problema que que tenga o no una propiedad, el problema es que el elemento no es NULL, sino que existe realmente, pero JavaScript no puede determinar que estado tiene el atributo display o visibility del elemento en cuestión. De todas formas muchas gracias por tu respuesta, el problema ya se ha solucionado.

[s3t3r]

Iniciado por IsaBelM

puedes leer el [URL="https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle"]css computado[/URL]

Interesante la información que me has pasado, pero eso seria tapar un problema cambiando la metodología, lo que en realidad estaba buscando es el porque sucedía eso, puesto que en otros sitios web que he creado utilizo la misma función y nunca tuve ese problema.

En realidad, por mas tonto que parezca, solucione el problema cambiando el nombre al archivo JS, lo creas o no, cambie el nombre por uno un poco mas largo y se soluciono el problema, tal vez alguna cuestión de apache, realmente no se, pero el problema se soluciono. Esto me hizo acordar a los problemas que hay cuando asignas nombres muy largos a los identificadores o clases, o cuando comienzas con un numero en dichos identificadores o clases.

Desde ya muchas gracias por tu tiempo!

[IsaBelM]

algunos días se aprende algo

mi respuesta venía dada a esto

Iniciado por s3t3r

por ejemplo, si agrego esta función al JS con un alert, al iniciar el sitio me devuelve vacio pero sin ningún error, la función seria

Código:

window.onload = function(){ alert(document.getElementById('contenedor').style.visibility)}

Es un error muy extraño y muy difícil de expresar, sepan disculpar.

Desde ya muchas gracias!

window.onload = function(){
console.log(document.getElementById('contenedor'). style.visibility); // vacío
console.log(window.getComputedStyle(document.getEl ementById('contenedor'))['visibility']); // hidden
}

por cierto el nombre de la propiedad height la tienes mal escrita

[jp91]

Iniciado por s3t3r

Si, comprendo como funciona, tal vez no leíste bien lo que exprese, puse la función window.onload =... lo que hace que cuando se cargue todo el sitio recién se ejecute, es decir, ya todo el sitio tendrá asignado el estilo CSS, sus Identificadores y Classes, en realidad no es el problema que que tenga o no una propiedad, el problema es que el elemento no es NULL, sino que existe realmente, pero JavaScript no puede determinar que estado tiene el atributo display o visibility del elemento en cuestión. De todas formas muchas gracias por tu respuesta, el problema ya se ha solucionado.

jejeje Me alegro que este resuelto y eso solo era una explicacion facil de como funciona un navegador por si habia alguna duda, ehh un par de cosas Haber para js Null significa que el objeto existe pero no sabe el valor, y en este caso te estaba devolviendo una string vacia lo cual es diferente, el atributo display del Div si esta definido por defector "block" y no el del nodo tipo texto entonces visibility si esta pero vacio. Asi con onload js te esta devolviendo lo correcto.