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,

jquery css dhtml SuPronunciado
fuente
$('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")
Adam Albrecht
fuente
¿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", "");
Peter Olson
fuente
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': ''});
justkt
fuente
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');
Sueños surrealistas
fuente
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.

Adiyya Tadikamalla
fuente
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 :)

Wajid Khan
fuente