Problema cambiando estilo de elemento

[pinchu]

Hola:

Cuando se pretende cambiar el estilo de un elemento mediante css, enseguida todo el mundo salta con lo de document.getElementById("pepe").style.width = "100px";
pero en librosweb me encuentro con esto:

Todos los ejemplos anteriores hacen uso de la propiedad style para acceder o establecer el valor de las propiedades CSS de los elementos. Sin embargo, esta propiedad sólo permite acceder al valor de las propiedades CSS establecidas directamente sobre el elemento HTML. En otras palabras, la propiedad style del nodo sólo contiene el valor de las propiedades CSS establecidas mediante el atributo style de HTML.

Por otra parte, los estilos CSS normalmente se aplican mediante reglas CSS incluidas en archivos externos. Si se utiliza la propiedad style de DOM para acceder al valor de una propiedad CSS establecida mediante una regla externa, el navegador no obtiene el valor correcto

El tema es que tengo un div que cuando hago document.getElementById("pepe").style.visibility = "hidden"; hace caso pero si a continuación hago document.getElementById("pepe").style.visibility = "visible"; ya no responde...me pregunto si tiene algo que ver con lo que expongo arriba.

Por cierto, ¿ cuando se pone hidden un parrafo normalmente guarda el sitio que tenía en blanco o desaparece totalmente?

Gracias

[JavierB]

Hola pinchu

No creo que tenga nada que ver con lo que cuentas. Habría que conocer el código para ver en qué puede estar fallando.

Si utilizas visibility=hidden/visible se queda en blanco el espacio que ocupaba, si no quieres esto puedes usar "display=none/block"

Saludos,

[Panino5001]

Opino como javierB, el problema debe estar en otro lado.
Igualmente, para acceder a los valores de estilos definidos sin el atributo style hay un camino sencillo, que consiste en obtener los estilos computados:

Código:

function t(id){return document.getElementById(id);} 
function css(id,prop){
    if(window.getComputedStyle){
        return document.defaultView.getComputedStyle(t(id),null).getPropertyValue(prop);
    }else{
        var re = /(-([a-z]){1})/g;
        if (prop == 'float') prop = 'styleFloat';
        if (re.test(prop)) {
            prop = prop.replace(re, function () {
                return arguments[2].toUpperCase();
            });
        }
        return t(id).currentStyle[prop] ? t(id).currentStyle[prop] : null;
    }
}

[pinchu]

voy a utilizar display = none que me viene mejor.A ver si soy capaz de pasar de none a block y viceversa...

panino,el código este que pones...es sólo para obtener el estilo ¿no? Es que no tengo claro todo esto me parece a mí.
Para modificar una propiedad de estilo ¿siempre se usa document.getElementById("pepe").style.visibility = "hidden"; aunque este definido en la hoja de estilo y no en el propio elemento html?

Muchas gracias por las respuestas

[Panino5001]

Sí, si el estilo está definido en una hoja externa o entre tags <style></style>, para obtener el valor de una propiedad hay que referirse a los estilos computados (aunque hay otros caminos: http://www.telefonica.net/web2/blas-mar/leercss.html), a diferencia de cuando se usa el atributo style, ya sea como atributo html o como propiedad javascript de un objeto HTMLElement. Pero esté definido como esté definido el estilo, siempre puede modificarse usando elemento.style.propiedad=valor

[jamejilla]

panino, la función que has puesto ¿es compatible tanto con dom como con ie?

[Panino5001]

Es compatible los navegadores estandar y con explorer (explorer usa currentStyle, que está contemplada en la función; currentStyle requiere que los nombres compuestos de las propiedades css se usen camelizados, por eso también empleamoss una expresión regular que ayuda a hacer eso)

[pinchu]

panino me dice esto:

Error: uncaught exception: [Exception... "Operation is not supported" code: "9" nsresult: "0x80530009 (NS_ERROR_DOM_NOT_SUPPORTED_ERR)" location: "http://localhost/js/funciones.js Line: 56"]

¿Tienes idea de pq puede ser?

[Panino5001]

No, habría que ver cómo lo estás usando para decirte.

[Panino5001]

Un par de ejemplo donde he usado esa función:
http://www.disegnocentell.com.ar/notas2.php?id=251
http://www.disegnocentell.com.ar/notas2.php?id=252

[pinchu]

En mi caso creo que si le pasas un id que contiene un guión es cuando salta la excepción.Le he pasado otro id sin guión y me ha devuelto el valor correctamente

[buzu]

probablemente el navegador se está confundiendo con ese -. Lo mejor es no usar guiones en los nombres de id o clases. Otra cosa, para modificar estilos es mejor simplemente definir diferentes clases y solo cambiar la clase, a menos que lo que estés haciendo sean animaciones o cambios de estilo donde los estilos no puedan ser previamente definidos. Esto es por razones de desempeño que tienen que ver con la modificación del DOM al vuelo y el renderizado de las páginas.

[pinchu]

Tomo nota, lo haré mejor cambiando de clase entonces.

¿El identificador con '_' mejor que con '-' o tampoco es correcto?

[buzu]

preferbielemente el cammelCase