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,

jquery css dhtml C'est annoncé
la source
$('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")
Adam Albrecht
la source
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", "");
Peter Olson
la source
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': ''});
justkt
la source
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');
Rêves surréalistes
la source
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.

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

Wajid Khan
la source