Aggiunta e rimozione dell'attributo di stile da div con jquery

103

Ho ereditato un progetto su cui sto lavorando e sto aggiornando alcune animazioni jquery (pochissima pratica con jquery).

Ho un div da cui devo aggiungere e rimuovere l'attributo style. Ecco il div:

<div id='voltaic_holder'>

A un certo punto dell'animazione devo aggiungere uno stile:

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

Ho cercato in giro e ho trovato il .removeAttr()metodo ma non riesco a vedere come aggiungerlo, o anche parti remote di esso (come la parte superiore: solo -75px).

Grazie,

jquery css dhtml

— ItsPronounced
fonte

$('voltaic_holder').style = nullForse? Gli stili hanno il loro intero albero degli oggetti. la maggior parte degli altri attributi sono solo chiave = dati di tipo valore.

— Marc B

246

Potresti eseguire una delle seguenti operazioni

Imposta ogni proprietà di stile individualmente:

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

Imposta più proprietà di stile contemporaneamente:

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

Rimuovi uno stile specifico:

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

Rimuovi l'intero attributo di stile:

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

— Adam Albrecht
fonte

Posso aggiungere più di 1 proprietà CSS per riga? Oppure devo farne uno per ogni proprietà di stile in questo modo: $("#voltaic_holder").css("position", "relative"); $("#voltaic_holder").css("top", "-75");

— pronunciato il

3

Per rispondere a questa domanda, sì, puoi. Usa semplicemente un oggetto letterale sulla funzione .css (). Come $ ('foo'). Css ({'height': '30px', 'width': '50px'});

— Richard Neil Ilagan

@AdamAlbrecht Come posso rimuovere uno stile specifico che ho aggiunto perché in $ ("# voltaic_holder"). RemoveAttr ("style") rimuove tutto lo stile applicato che era di default con quello appena aggiunto.

— 3 regole

21

Per rimuovere completamente l'attributo di stile dello voltaic_holderspan, procedere come segue:

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

Per aggiungere un attributo, fai questo:

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

Per rimuovere solo lo stile in alto, procedi come segue:

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

— Peter Olson
fonte

15

Se stai usando jQuery, usa css per aggiungere CSS

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

Per rimuovere gli attributi CSS

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

— justkt
fonte

Non è possibile rimuovere l'attributo position o top dall'elemento voltaic_holder, perché non ha questi attributi. Quelle sono proprietà CSS definite nell'attributo style.

— Peter Olson

@Peter - doh! Modificato per l'uso.css

— solo il

10

Il modo più semplice per gestirlo (e la migliore soluzione HTML per l'avvio) è impostare classi con gli stili che si desidera utilizzare. Quindi è semplice usare addClass () e removeClass () o anche toggleClass () .

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

o anche

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

— Sogni surreali
fonte

2

Anwer è qui Come aggiungere dinamicamente uno stile per l'allineamento del testo utilizzando jQuery

— Il cavallo
fonte

2

In caso di metodo .css in jQuery per ! La regola importante non verrà applicata.

In questo caso dovremmo usare la funzione .attr .

Ad esempio: se desideri aggiungere uno stile come di seguito:

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

Dovresti usare:

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

Spero che aiuti qualcuno.

— Adiyya Tadikamalla
fonte

1

Rimuovi l'attributo di stile da div utilizzando la query J:

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

Aggiungi lo stile al div utilizzando la query J:

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

Aggiungi stile usando html:

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

Spero che sia utile :)

— Wajid khan
fonte