Ajouter et supprimer l'attribut de style d'une div avec jquery

Question

J'ai hérité d'un projet sur lequel je travaille et je dois mettre à jour quelques animations jquery (très peu de pratique avec jquery).

J'ai une div à laquelle je dois ajouter et enlever l'attribut style. Voici la div :

<div id='voltaic_holder'>

À un moment donné de l'animation, je dois lui ajouter un style :

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

J'ai fait des recherches et j'ai trouvé le .removeAttr() mais je ne vois pas comment l'ajouter, ni même des parties éloignées (comme le top:-75px only).

Merci,

Answer 1

Vous pouvez faire l'une des choses suivantes

Définissez chaque propriété de style individuellement :

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

Définir plusieurs propriétés de style à la fois :

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

Supprimer un style spécifique :

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

Supprimer l'ensemble de l'attribut de style :

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

Answer 2

Pour supprimer complètement l'attribut de style de l'élément voltaic_holder span, faites ceci :

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

Pour ajouter un attribut, procédez comme suit :

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

Pour ne retirer que le style supérieur, procédez comme suit :

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

Answer 3

Si vous utilisez jQuery, utilisez css pour ajouter des feuilles de style CSS

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

Pour supprimer les attributs CSS

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

Answer 4

La solution la plus simple (et la meilleure solution HTML) consiste à créer des classes qui contiennent les styles que vous souhaitez utiliser. Il suffit ensuite d'utiliser addClass() y removeClass() ou même toggleClass() .

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

ou même

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

Answer 5

En cas de .css dans jQuery pour !important ne s'applique pas.

Dans ce cas, nous devons utiliser .attr fonction.

Par exemple : Si vous voulez ajouter un style comme ci-dessous :

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

Vous devez utiliser :

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

J'espère que cela aidera quelqu'un.