1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda Como puedo quitar una propiedad css con javascript

Tema en 'Javascript' comenzado por Jose Villalta, 31 de Agosto de 2016.

  1. Jose Villalta

    Jose Villalta Nuevo Miembro

    Se incorporó:
    26 de Agosto de 2016
    Mensajes:
    28
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Hola, queria saber si puedo "desactivar" una propiedad css con javascript cuando el width sea menor o igual a 807 px y cuando vuelva a tener 808px la propiedad vuelva a estar como antes
     
  2. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.106
    Me gusta recibidos:
    490
    Puntos de trofeos:
    83
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    Si se puede con JS o jQuery, yo te la hice con jquery ;)

    Código (Javascript):
    $(window).on("resize width", function() {
      if ($(window).width() < 807) {
        $("p").css("top", "0");
      } else {
        $("p").removeAttr("style");
      }
    });
    Demo:
    http://codepen.io/AngelKrak/pen/zKOZRq
     
  3. Jose Villalta

    Jose Villalta Nuevo Miembro

    Se incorporó:
    26 de Agosto de 2016
    Mensajes:
    28
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    esto lo quiero implementar en un menu desplegable responsive que tambien es sticky y queria poner esto para que cuando esten en un dispositivo se quite la propiedad fixed me puedes ayudar con eso? ya que no comprendo muy bien el codigo :/
     
  4. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.106
    Me gusta recibidos:
    490
    Puntos de trofeos:
    83
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    Te explico un poco:
    Código (Javascript):
    $(window).on("resize width", function() {
      if ($(window).width() < 807) { //La condicion de que se aplicaran los estilos si la pantalla es menor a 807px
        $("p").css("top", "0"); //Estilos que se aplicaran si la pantalla es menor a 807
      } else {
        $("p").removeAttr("style"); //si es mayor a 807 quitamos cualquier estilos establecidos en la etiqueta p
      }
    });
    si establece la funcion resize y width para detectar el ancho de la pagina y si se cambia de resolucion...
    despues se crea la condicion $(window).width() < 807 con la cual $(window).width() detecta el ancho en numeros y luego le pongo que sea menor(<) a 807px para ejecutar el css solo si es menor a 807, si es mayor a 807 removemos el css establecido anteriormente(no el original)...
     
  5. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    531
    Me gusta recibidos:
    399
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Hola, con el ejemplo AngelKrak lo puedes hacer.. pero en ves de colocar un top y remover el estilo ... Agrega la clase de tu caja fixed y aplica el estilo absolute como se muestra a continuación. Sin embargo puedes colocar varios estilos si deseas.

    Código (Javascript):
    $(window).on("resize width", function() {
      if ($(window).width() < 607) {
     
        $(".box").css({"position": "absolute",
                      "top": "30px"})
      } else {
        $(".box").css({"position": "fixed",
                      "top": "0px"})
      }
    });
    Esta es una manera intuitiva en hacerlo mediante jQuery...!! Además lo puedes intentar agregando las clases en vez de escribir el estilo en JS por ejemplo:
    si se cumple
    $(".box").addClass("opcion1");
    en caso de que no
    $(".box").removeClass("opcion1");

    esto depende de tu lenguajes escrito y programado.

    AQUÍ TE DEJO UN EJEMPLO SENCILLO DE MENÚ!!

    http://codepen.io/Dawud89/pen/XjAQbB
     
    A AngelKrak le gusta esto.

Comparte esta página