Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de modificar el valor de una propiedad que se modifico en javascript en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/10/2017, 22:16
 
Fecha de Ingreso: febrero-2015
Mensajes: 20
Antigüedad: 9 años, 4 meses
Puntos: 0
modificar el valor de una propiedad que se modifico en javascript

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.
  #2 (permalink)  
Antiguo 21/10/2017, 09:02
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 3 meses
Puntos: 1146
Respuesta: modificar el valor de una propiedad que se modifico en javascript

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:
Ver original
  1. @media (min-width:1024px){
  2.     #menu{
  3.         position: static;
  4.         transform:translateX(0%)!important;
  5.     }
  6. }

Etiquetas: javascript, modificar, propiedad, valor
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:56.