myDiv.style.display se vuelve en blanco cuando se establece en la hoja de estilo maestra

5 minutos de lectura

avatar de usuario
Juan Fitzpatrick

Version corta: ¿Es el comportamiento estándar que myDiv.style.display (Javascript) vuelve en blanco cuando he configurado eso div para display:none en una hoja de estilo maestra, pero devuelve “ninguno” cuando se establece a través de un estilo en línea?

Versión larga:

tengo algunos divs que escondo y mostrando a través de su display estilo, alternándolo con Javascript entre block y none. Siempre empiezan escondidos (display:none) que he estado configurando con estilos en línea de esta manera:

<div id="anID" class="aClass" style="display:none">
   stuff
</div>

Aquí está el Javascript para alternar entre none y block. Las dos funciones chOpsXXX() simplemente configuran el divSection.style.display al valor opuesto (junto con otras tareas domésticas):

var divSection = document.getElementById("chOpsSection" + strSectionID);
var strDisplay = divSection.style.display;
if (strDisplay == "none") {
    chOpsDisplaySection(strSectionID);
} else {
    chOpsHideSection(strSectionID);
}

Todo esto funciona bien cuando uso un atributo de estilo en línea para establecer la inicial display:none estilo.

También estoy configurando otros estilos para estos divs en la hoja de estilo maestra. Así que decidí que podría tener sentido mover el estado inicial de display:none a dicha hoja de estilo. Así lo hice. No lo publicaré, creo que puedes imaginarlo.

Pero cuando lo hice, el div está inicialmente oculto (display:none), pero la primera llamada a divSection.style.display devuelve una cadena vacía (alert(strDisplay); devuelve una cadena en blanco, no nula).

Mi Javascript que se muestra arriba lo oculta (porque no es igual a “ninguno”) y luego el Siguiente llamar a divSection.style.display devuelve “ninguno” y todo funciona bien desde allí. (El mismo comportamiento si lo configuro en inline en la hoja de estilo maestra: el div es inicialmente visible, y la primera llamada a divSection.style.display devuelve una cadena en blanco).

Esto es bastante fácil de solucionar comprobando tanto “ninguno” como “” en mi Javascript anterior. Pero quisiera saber si esta devolución de una cadena en blanco de divSection.style.display es un comportamiento estándar.

Todas las respuestas son bienvenidas.

  • ¿El estilo está definido dentro del CSS? ¿O en la etiqueta HTML?

    – Nicolás Campolungo

    25 mayo 2013 a las 11:00

  • En el escenario uno, que funciona como se esperaba, display:none se establece en la etiqueta HTML. En el escenario dos, que es el que no estoy entendiendo, display:none se establece en el archivo css. Espero haber usado la terminología correcta arriba.

    – John Fitzpatrick

    25 de mayo de 2013 a las 11:02

  • @John F, ¿puede actualizar su pregunta diciendo si está interesado en soluciones que involucren o no marcos? Siento la necesidad de que los votos negativos se justifiquen aquí. Gracias

    – alexb

    25 de mayo de 2013 a las 11:52

  • @Alexb perdón por los votos negativos. Todas las respuestas son bienvenidas por mí. Mencionaré eso.

    – John Fitzpatrick

    25 mayo 2013 a las 11:55

  • @Alexb: Para ser honesto, la parte más útil de tu respuesta fueron los enlaces con las explicaciones de lo que estaba pasando. El fragmento de Jquery fue la guinda del pastel.

    – John Fitzpatrick

    25 de mayo de 2013 a las 11:58

avatar de usuario
Nicolás Campolungo

Si accede a un elemento DOM a través de JS (usando, por ejemplo, getElementById) no podrás leer el estilo calculado de ese elemento, porque está definido dentro del archivo CSS. Para evitar esto, tienes que usar la propiedad getComputedStyle(o currentStyle para IE).

function getStyle(id, name)
{
    var element = document.getElementById(id);
    return element.currentStyle ? element.currentStyle[name] : window.getComputedStyle ? window.getComputedStyle(element, null).getPropertyValue(name) : null;
}

Uso(JSFiddle):

var display = getStyle('myDiv', 'display');
alert(display); //will print 'none' or 'block' or 'inline' etc

  • Hola @LightStyle, ¿quisiste decir element.currentStyle[name] en vez de x.currentStyle[styleProp]?

    –Steven Moseley

    25 mayo 2013 a las 11:21

  • +1 De mí, también. Gracias por esta respuesta. Me enseñaste algo nuevo.

    –Steven Moseley

    25 mayo 2013 a las 11:45

  • genial y útil;) me ayudó a inventar esto github.com/jintor/stubquery.js/blob/main/stubquery.js

    – Jintor

    22 de agosto de 2021 a las 2:45

avatar de usuario
steven mosley

No funciona porque lo eliminaste como un style atributo en su elemento, y lo colocó en una hoja de estilo externa. DOM no mostrará valores de atributos que no existen en el objeto del documento (DOM es simplemente un analizador XML que lee su documento HTML palabra por palabra).

Para encontrar valores CSS establecidos en una hoja de estilo externa, debe analizar document.styleSheets y busque los selectores correspondientes.

Aquí es donde usar una biblioteca como jQuery se vuelve realmente útil, porque analiza hojas de estilo externas y tiene métodos de ayuda para aplicar el CSS completo a un elemento.

Ejemplo de cómo harías esto en jQuery:

value = $("#anID").css("display");

PD: buscar una cadena vacía tampoco funcionará para usted, porque display: “” no es lo mismo que display: “none” (y de hecho, es lo mismo que display: block, para un div, porque un en blanco esencialmente significa inherit)

Mi solución:

Crear clase .hidden

.hidden {
   display: none !important;
}

JavaScript:

function toggleHidden(id) {
    var x = document.getElementById(id);
    x.classList.toggle('hidden');
}

La propiedad de visualización de javascript representa solo el atributo DOM

Mozilla JS wiki, Devuelve un objeto que representa el atributo de estilo del elemento.

W3escuelas, El objeto Style representa un declaración de estilo individual

Podrías usar jquery CSS método para obtener un valor de visualización mixto como

alert($("#foo").css("display"))

debería mostrar ninguna incluso si lo configuras con css

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad