Modifica dinamica dell'attributo di stile dell'elemento utilizzando JavaScript

117

Ho un certo foglio di stile per un div. Ora voglio modificare dinamicamente un attributo di div usando js.

Come posso farlo?

document.getElementById("xyz").style.padding-top = "10px";

È corretto?

javascript html css

— jslearner
fonte

123

È quasi corretto.

Poiché -è un operatore javascript, non puoi davvero averlo nei nomi delle proprietà. Se stavi impostando, bordero qualcosa di simile, invece, il tuo codice funzionerebbe perfettamente.

Tuttavia, la cosa che devi ricordare per padding-top, e per qualsiasi nome di attributo con trattino, è che in javascript, rimuovi il trattino e rendi maiuscola la lettera successiva, quindi nel tuo caso sarebbe paddingTop.

Ci sono altre eccezioni. JavaScript ha alcune parole riservate, quindi non puoi impostare in floatquesto modo, ad esempio. Invece, in alcuni browser è necessario utilizzare cssFloate in altri styleFloat. È per discrepanze come questa che si consiglia di utilizzare un framework come jQuery, che gestisce le incompatibilità del browser per te ...

— David Hedlund
fonte

213

Oltre ad altre risposte, se desideri utilizzare la notazione trattino per le proprietà di stile, puoi anche utilizzare:

document.getElementById("xyz").style["padding-top"] = "10px";

— KooiInc
fonte

3

Nemmeno io, questo è davvero utile per le funzioni dinamiche, si può passare lo stile come valore di stringa, quindi impostare lo stile e il valore. Ottima soluzione.

— raphie

1

Inoltre, aggiungendo a ciò che dice @raphie, puoi anche usare document.getElementById("xyz").style["paddingTop"] = '10px'.

— Spazzolino da denti

1

@anunkjn: hai ragione. Direi che non funziona più in FF. Il che è, beh ... strano.

— KooiInc

17

Risolvo un problema simile con:

document.getElementById("xyz").style.padding = "10px 0 0 0";

Spero che aiuti.

— Chairul
fonte

2

Lo svantaggio di fare in questo modo è che ottieni l'imbottitura per gli altri lati 0. E a volte non lo vuoi.

— Gustavo Straube

17

C'è anche la style.setPropertyfunzione:
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

document.getElementById("xyz").style.setProperty('padding-top', '10px');

// version with !important priority
document.getElementById("xyz").style.setProperty('padding-top', '10px', 'important');

— icl7126
fonte

15

Supponendo che tu abbia HTML come questo:

<div id='thediv'></div>

Se vuoi modificare l'attributo di stile di questo div, dovresti usare

document.getElementById('thediv').style.[ATTRIBUTE] = '[VALUE]'

Sostituisci [ATTRIBUTE]con l'attributo di stile che desideri. Ricorda di rimuovere "-" e di rendere maiuscola la seguente lettera.

Esempi

document.getElementById('thediv').style.display = 'none'; //changes the display
document.getElementById('thediv').style.paddingLeft = 'none'; //removes padding

— JohnP
fonte

1

Come affermato nella risposta accettata, ci sono alcune eccezioni. Mi piace float.

— Gustavo Straube

8

document.getElementById("xyz").style.padding-top = '10px';

sarà

document.getElementById("xyz").style["paddingTop"] = '10px';

— T.Todua
fonte

7

Suggerirei di utilizzare una funzione, che accetta l'id dell'elemento e un oggetto contenente le proprietà CSS, per gestirlo. In questo modo puoi scrivere più stili contemporaneamente e utilizzare la sintassi delle proprietà CSS standard.

//function to handle multiple styles
function setStyle(elId, propertyObject) {
    var el = document.getElementById(elId);
    for (var property in propertyObject) {
        el.style[property] = propertyObject[property];
    }
}

setStyle('xyz', {'padding-top': '10px'});

Meglio ancora potresti memorizzare gli stili in una variabile, che renderà molto più semplice la gestione della proprietà, ad es

var xyzStyles = {'padding-top':'10px'}
setStyle('xyz', xyzStyles);

spero che aiuti

— rjbultitude
fonte

7

Sorpreso di non aver visto la soluzione del selettore di query di seguito ,

document.querySelector('#xyz').style.paddingTop = "10px"

Soluzioni CSSStyleDeclaration , un esempio della risposta accettata

document.getElementById('xyz').style.paddingTop = "10px";

— Rama
fonte

5

document.getElementById("xyz").setAttribute('style','padding-top:10px');

farebbe anche il lavoro.

— Pinkesh Badjatiya
fonte

5

Lo svantaggio di fare in questo modo è che rimuovi qualsiasi altro stile in linea. Questo perché stai sostituendo l'intero valore dell'attributo. Immagino che ottenere lo stile corrente, verificare un valore esistente per la proprietà che si desidera impostare e quindi aggiungere / sostituire con il valore desiderato sia una soluzione migliore.

— Gustavo Straube

Concordato. Ma l'OP aveva bisogno di una soluzione più vicina a ciò che stava già facendo che non tenesse conto del tuo caso d'uso. Questo è uno dei modi più semplici per ottenerlo, ma sicuramente non è il migliore.

— Pinkesh Badjatiya

@GustavoStraube, non lo definirei uno svantaggio. In molti casi questo è esattamente ciò che lo sviluppatore vuole fare, cioè sovrascrivere lo stile dell'elemento. Lo chiamerei una conseguenza del farlo in questo modo.

— stwr667

5

document.getElementById('id').style = 'left: 55%; z-index: 999; overflow: hidden; width: 0px; height: 0px; opacity: 0; display: none;';

per me va bene

— Hyperion
fonte