[SOLUCIONADO] modificar el valor de una propiedad que se modifico en javascript

[braedu555]

Probablemente mi problema tenga una solución muy fácil ya que soy novato en esto, pero aun no logro hacer lo que quiero, la cosa es que en mi pagina tengo un boton que al ser pulsado dezplaza y devuelve un div fuera y dentro de la pantalla modificando los estilos mediante codigo javascript

Código:

movMenu.style.transform = 'translateX(-100%)';

En el css tengo:

Código:

@media (min-width:1024px){
    #menu{
		position: static;
		transform:translateX(0%);
    }
}

En el momento en el que el tamaño de pantalla es mayor a 1024px el boton desaparece por lo que ya no es posible cambiar el estado de transform manualmente, el problema es que ignora la instruccion transform del @media y la propiedad transform se queda en donde se quedo en javascript, en palabras mas simples no puedo cambiar una propiedad css que modifique en javascript.
Tengo al menos una idea de porque se comporta asi, pues me doy cuenta que cuando modifico un estilo por medio de javascript, el estilo se inyecta directamente en la etiqueta correspondiente del html,pero igual quisiera librarme de dudas.

[ArturoGallegos]

como bien dices, el problema es que javascript inserta esos estilos directo en el HTML (en linea)

dado que la jerarquia de esos estilos pesan mas que los de hojas de estilo el navegador ignora tus nuevos estilos., para solventarlo tienes dos opciones.

1.- usa javascript para cambiar ese valo acorde a la pantalla
2.- usa la propiedad !important

Código CSS:

@media (min-width:1024px){
    #menu{
        position: static;
        transform:translateX(0%)!important;
    }
}