Ajout et suppression d'un attribut de style de div avec jquery


103

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

J'ai un div dont je dois ajouter et supprimer l'attribut style. Voici le div:

<div id='voltaic_holder'>

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

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

J'ai cherché et trouvé la .removeAttr()méthode mais je ne vois pas comment l'ajouter, ni même des parties distantes de celle-ci (comme le haut: -75px uniquement).

Merci,


$('voltaic_holder').style = nullpeut-être? Les styles ont leur propre arborescence d'objets. la plupart des autres attributs ne sont que des données de type clé = valeur.
Marc B

Réponses:


246

Vous pouvez effectuer l'une des opérations suivantes

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

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

Définissez 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", "");

Supprimez tout l'attribut de style:

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

Puis-je ajouter plus d'une propriété css par ligne? Ou dois-je en faire un pour chaque propriété de style comme ceci: $("#voltaic_holder").css("position", "relative"); $("#voltaic_holder").css("top", "-75");
ItsPrononcé

3
Pour répondre à cela, oui, vous pouvez. Utilisez simplement un objet littéral sur la fonction .css (). Comme $ ('foo'). Css ({'height': '30px', 'width': '50px'});
Richard Neil Ilagan

@AdamAlbrecht Comment puis-je supprimer un style spécifique que j'ai ajouté car dans $ ("# voltaic_holder"). RemoveAttr ("style") il supprime tout le style appliqué qui était par défaut avec nouvellement ajouté.
3 règles du

21

Pour supprimer complètement l'attribut style de la voltaic_holderplage, procédez comme suit:

$("#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 supprimer uniquement le style supérieur, procédez comme suit:

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

15

Si vous utilisez jQuery, utilisez css pour ajouter du CSS

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

Pour supprimer des attributs CSS

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

Vous ne pouvez pas supprimer l'attribut position ou top de l'élément voltaic_holder, car il ne possède pas ces attributs. Ce sont des propriétés css définies dans l'attribut style.
Peter Olson

@Peter - doh! Modifié pour utiliser.css
justkt

10

Le moyen le plus simple de gérer cela (et la meilleure solution HTML pour démarrer) est de configurer des classes qui ont les styles que vous souhaitez utiliser. Ensuite, il suffit d' utiliser addClass () et removeClass () , ou même toggleClass () .

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

ou même

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


2

Dans le cas de la méthode .css dans jQuery, la règle importante ne s'appliquera pas.

Dans ce cas, nous devrions utiliser la fonction .attr .

Par exemple: si vous souhaitez ajouter un style comme ci-dessous:

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

Tu devrais utiliser:

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

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


1

Supprimez l'attribut de style de div à l'aide de la requête J:

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

Ajoutez du style à div en utilisant la requête J:

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

Ajoutez du style en utilisant html:

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

J'espère que cela vous sera utile :)

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.