-1

Tengo entendido que para acceder al estilo de un elemento es con 'Element.style', pero con media query, esto no me funciona, ya que al pedir el valor, me devuelve 'undefined' y no 'none', que es como esta establecido en el media?

Este es el css principal

.header > ul{
    list-style: none;
    display: inline-block;
    padding-left: 20px;
    position: absolute;
    width: 100vw;
    height: 100%;

}

Y este es el media:

@media screen and (max-width: 720px){

    .header > ul{
        list-style: none;
        display: none;
        position: absolute;
        width: 20vw;
        right: 0;
        margin-top: 7.5%;
        margin-right: 0;
    }
}

HTML:

<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="estilo.css">
    <link rel="stylesheet" type="text/css" href="responsive.css">
</head>
<body>
    <div class="header"> 
        <h1>Logo</h1>
        <ul id="menu">  
            <li>Accesorios</li>
            <li>Razas</li>
            <li>Contactenos</li>
            <li>Ubicación</li>
        </ul>
    </div>

Olviden esta parte , es solo porque no me dejaba publicar tanto codigo.

4
  • ¿Podrías agregar tu HTML para reproducir tu caso completo?
    – user128299
    Commented el 23 abr. 2020 a las 22:42
  • Ahi esta el HTML
    – VictorM03
    Commented el 23 abr. 2020 a las 22:48
  • Disculpame, no termino de entender que es lo que falla, por que reproduje tu ejemplo y a determinados pixeles se desaparece el menú como lo delimitaste en el CSS, ¿podrías aclarar un poco?
    – user128299
    Commented el 23 abr. 2020 a las 22:54
  • Con el responsive.css revisa, pero alli es mi duda, cuando no se aplica el media, todo bien, el 'element.style.display' si funciona, y me devuelve 'inline-block', que es el valor que le di en el css principal, pero al activarse el media (Cuando la resolucion disminuye), 'element.style.display' solo me retorna 'undefined', no se si deba utilizar otra propiedad que no sea style
    – VictorM03
    Commented el 23 abr. 2020 a las 22:59

1 respuesta 1

1

Si el elemento está heredando la propiedad display desde una hoja de estilos, debes utilizar

getComputedStyle(elemento, null).display;

Como se puede observar en el siguiente fiddle: https://jsfiddle.net/nu3Lsk84/

Adicionalmente, no deberías re-declarar toda la lista de estilos de la lista del header. Solo aquellos que deseas sobreescribir como el display.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.