Agregar y eliminar el atributo de estilo de div con jquery


103

He heredado un proyecto en el que estoy trabajando y estoy actualizando algunas animaciones de jquery (muy poca práctica con jquery).

Tengo un div del que necesito agregar y eliminar el atributo de estilo. Aquí está el div:

<div id='voltaic_holder'>

En un punto de la animación, necesito agregarle un estilo:

<div id='voltaic_holder' style='position:absolute;top:-75px'>

Busqué y encontré el .removeAttr()método, pero no puedo ver cómo agregarlo, o incluso partes remotas (como la parte superior: solo -75px).

Gracias,


$('voltaic_holder').style = null¿quizás? Los estilos tienen su propio árbol de objetos completo. la mayoría de los demás atributos son solo datos de tipo clave = valor.
Marc B

Respuestas:


246

Puedes hacer cualquiera de las siguientes

Establezca cada propiedad de estilo individualmente:

$("#voltaic_holder").css("position", "relative");

Establezca varias propiedades de estilo a la vez:

$("#voltaic_holder").css({"position":"relative", "top":"-75px"});

Eliminar un estilo específico:

$("#voltaic_holder").css({"top": ""});
// or
$("#voltaic_holder").css("top", "");

Elimine todo el atributo de estilo:

$("#voltaic_holder").removeAttr("style")

¿Puedo agregar más de 1 propiedad css por línea? ¿O tengo que hacer uno para cada propiedad de estilo así: $("#voltaic_holder").css("position", "relative"); $("#voltaic_holder").css("top", "-75");
presentó el

3
Para responder eso, sí puedes. Simplemente use un objeto literal en la función .css (). Como $ ('foo'). Css ({'altura': '30px', 'ancho': '50px'});
Richard Neil Ilagan

@AdamAlbrecht ¿Cómo puedo eliminar un estilo específico que he agregado porque en $ ("# voltaic_holder"). RemoveAttr ("style") elimina todo el estilo aplicado que estaba por defecto con el recién agregado.
3 reglas

21

Para eliminar por completo el atributo de estilo del voltaic_holdertramo, haga lo siguiente:

$("#voltaic_holder").removeAttr("style");

Para agregar un atributo, haga esto:

$("#voltaic_holder").attr("attribute you want to add", "value you want to assign to attribute");

Para eliminar solo el estilo superior, haga esto:

$("#voltaic_holder").css("top", "");

15

Si está usando jQuery, use css para agregar CSS

$("#voltaic_holder").css({'position': 'absolute',
    'top': '-75px'});

Para eliminar atributos CSS

$("#voltaic_holder").css({'position': '',
    'top': ''});

No puede eliminar la posición o el atributo superior del elemento voltaic_holder, porque no tiene esos atributos. Esas son propiedades CSS definidas en el atributo de estilo.
Peter Olson

@Peter - ¡doh! Editado para usar.css
justkt

10

La forma fácil de manejar esto (y la mejor solución HTML para arrancar) es configurar clases que tengan los estilos que desea usar. Entonces es una simple cuestión de usar addClass () y removeClass () , o incluso toggleClass () .

$('#voltaic_holder').addClass('shiny').removeClass('dull');

o incluso

$('#voltaic_holder').toggleClass('shiny dull');


2

En el caso del método .css en jQuery , no se aplicará la regla importante .

En este caso deberíamos usar la función .attr .

Por ejemplo: si desea agregar estilo como se muestra a continuación:

<div id='voltaic_holder' style='position:absolute;top:-75px !important'>

Deberías usar:

$("#voltaic_holder").attr("style", "position:absolute;top:-75px !important");

Espero que ayude a alguien.


1

Elimine el atributo de estilo de div usando la consulta J:

$("#TableDiv").removeAttr("style");

Agregue estilo a div usando la consulta J:

$("#TableDiv").attr("style", "display: none;");

Agregue estilo usando html:

<div class="row" id="TableDiv" style="display: none;">
</div>

Espero que sea de ayuda :)

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.