DOM e gli stili CSS

Spesso, è importante modificare o aggiungere stili agli elementi HTML. In questa lezione, vediamo come aggiungere gli stili CSS con JavaScript e il DOM.

Come utilizzare gli stili

Prima di vedere la lista completa di tutti gli stili disponibili in JavaScript, vediamo come utilizzarli. La sintassi da utilizzare è: elemento.style.stile.

Vediamo un esempio.

document.getElementById("elemento").style.backgroundColor = "red";

Nell'esempio, viene impostato lo sfondo di un elemento in rosso.

Ottenere e restituire valori

Con tutti gli stili, possiamo ottenere o restituire il valore dello stile. Ad esempio:

<p id="elemento" style="color:red">Paragrafo</p>

<script>
// Ottenere lo stile
alert(document.getElementById("elemento").style.color);  // Risultato: "red"

// Impostare un nuovo stile
document.getElementById("elemento").style.color = "green";  // Colore
document.getElementById("elemento").style.fontSize = "20px";  // Dimensione del testo
</script>

Lista completa di tutti gli stili

Stile	Descrizione
`alignContent`	Specifica l'allineamento dei contenuti lungo l'asse trasversale.
`alignItems`	Specifica l'allineamento degli elementi lungo l'asse trasversale.
`alignSelf`	Specifica l'allineamento di un elemento specifico lungo l'asse trasversale.
`animation`	Definisce una serie di stili per le animazioni.
`animationDelay`	Specifica un ritardo prima dell'avvio di un'animazione.
`animationDirection`	Specifica la direzione di riproduzione di un'animazione.
`animationDuration`	Specifica la durata di un'animazione.
`animationFillMode`	Specifica come riempire lo stato finale di un'animazione.
`animationIterationCount`	Specifica il numero di volte che un'animazione deve ripetersi.
`animationName`	Specifica il nome di un'animazione definita.
`animationTimingFunction`	Specifica la curva di velocità di un'animazione.
`animationPlayState`	Specifica lo stato di riproduzione di un'animazione.
`background`	Definisce uno sfondo per un elemento.
`backgroundAttachment`	Specifica se l'immagine di sfondo deve scorrere con il contenuto o rimanere fissa.
`backgroundClip`	Specifica l'area di visualizzazione del background.
`backgroundColor`	Specifica il colore di sfondo di un elemento.
`backgroundImage`	Specifica un'immagine di sfondo per un elemento.
`backgroundOrigin`	Specifica da dove posizionare l'immagine di sfondo.
`backgroundPosition`	Specifica la posizione dell'immagine di sfondo.
`backgroundRepeat`	Specifica come ripetere l'immagine di sfondo.
`backgroundSize`	Specifica le dimensioni dell'immagine di sfondo.
`backfaceVisibility`	Specifica la visibilità del retro di un elemento 3D.
`border`	Definisce una serie di proprietà del bordo in un'unica dichiarazione.
`borderBottom`	Definisce una serie di proprietà del bordo inferiore in un'unica dichiarazione.
`borderBottomColor`	Specifica il colore del bordo inferiore.
`borderBottomLeftRadius`	Specifica il raggio di curvatura dell'angolo in basso a sinistra del bordo.
`borderBottomRightRadius`	Specifica il raggio di curvatura dell'angolo in basso a destra del bordo.
`borderBottomStyle`	Specifica lo stile del bordo inferiore.
`borderBottomWidth`	Specifica la larghezza del bordo inferiore.
`borderCollapse`	Specifica se un bordo deve essere unito con il bordo del suo elemento genitore.
`borderColor`	Definisce una serie di colori del bordo in un'unica dichiarazione.
`borderImage`	Definisce un'immagine come bordo di un elemento.
`borderImageOutset`	Specifica la dimensione dell'area esterna dell'immagine di bordo.
`borderImageRepeat`	Specifica se il bordo dell'immagine deve essere ripetuto, arrotondato o allungato.
`borderImageSlice`	Specifica come suddividere l'immagine di bordo.
`borderImageSource`	Specifica l'URL dell'immagine da utilizzare come bordo.
`borderImageWidth`	Specifica la larghezza dell'immagine di bordo.
`borderLeft`	Definisce una serie di proprietà del bordo sinistro in un'unica dichiarazione.
`borderLeftColor`	Specifica il colore del bordo sinistro.
`borderLeftStyle`	Specifica lo stile del bordo sinistro.
`borderLeftWidth`	Specifica la larghezza del bordo sinistro.
`borderRadius`	Specifica il raggio di curvatura degli angoli del bordo.
`borderRight`	Definisce una serie di proprietà del bordo destro in un'unica dichiarazione.
`borderRightColor`	Specifica il colore del bordo destro.
`borderRightStyle`	Specifica lo stile del bordo destro.
`borderRightWidth`	Specifica la larghezza del bordo destro.
`borderSpacing`	Specifica lo spazio tra le celle di una tabella.
`borderStyle`	Definisce una serie di stili del bordo in un'unica dichiarazione.
`borderTop`	Definisce una serie di proprietà del bordo superiore in un'unica dichiarazione.
`borderTopColor`	Specifica il colore del bordo superiore.
`borderTopLeftRadius`	Specifica il raggio di curvatura dell'angolo in alto a sinistra del bordo.
`borderTopRightRadius`	Specifica il raggio di curvatura dell'angolo in alto a destra del bordo.
`borderTopStyle`	Specifica lo stile del bordo superiore.
`borderTopWidth`	Specifica la larghezza del bordo superiore.
`borderWidth`	Definisce una serie di larghezze del bordo in un'unica dichiarazione.
`bottom`	Specifica la distanza tra il bordo inferiore di un elemento e il bordo superiore dell'elemento genitore.
`boxShadow`	Specifica un'ombra per un elemento.
`boxSizing`	Specifica come calcolare la larghezza e l'altezza di un elemento.
`captionSide`	Specifica il posizionamento della didascalia di una tabella.
`caretColor`	Specifica il colore del cursore di testo.
`clear`	Specifica su quale lato degli elementi flottanti non devono essere posizionati altri elementi flottanti.
`clip`	Specifica un'area ritagliata all'interno di un elemento posizionato in modo assoluto.
`color`	Specifica il colore del testo di un elemento.
`columnCount`	Specifica il numero di colonne in un elemento multicolonna.
`columnFill`	Specifica come riempire automaticamente le colonne di un elemento multicolonna.
`columnGap`	Specifica la distanza tra le colonne di un elemento multicolonna.
`columnRule`	Definisce una serie di proprietà del riquadro tra le colonne di un elemento multicolonna.
`columnRuleColor`	Specifica il colore del riquadro tra le colonne di un elemento multicolonna.
`columnRuleStyle`	Specifica lo stile del riquadro tra le colonne di un elemento multicolonna.
`columnRuleWidth`	Specifica la larghezza del riquadro tra le colonne di un elemento multicolonna.
`columns`	Specifica una serie di proprietà per un elemento multicolonna.
`columnSpan`	Specifica se un elemento deve attraversare tutte le colonne di un elemento multicolonna.
`columnWidth`	Specifica la larghezza delle colonne di un elemento multicolonna.
`counterIncrement`	Specifica l'incremento del valore di un contatore.
`counterReset`	Specifica il valore iniziale di un contatore.
`cssFloat`	Specifica come un elemento dovrebbe fluttuare.
`cursor`	Specifica il tipo di cursore da visualizzare quando il mouse è sopra un elemento.
`direction`	Specifica la direzione del testo.
`display`	Specifica come un elemento deve essere visualizzato.
`emptyCells`	Specifica come gestire le celle vuote di una tabella.
`filter`	Specifica gli effetti grafici da applicare a un elemento.
`flex`	Specifica la capacità di espansione di un elemento flessibile.
`flexBasis`	Specifica la dimensione di base di un elemento flessibile.
`flexDirection`	Specifica la direzione principale di layout per un contenitore flessibile.
`flexFlow`	Specifica la direzione principale e l'allineamento incrociato di un contenitore flessibile.
`flexGrow`	Specifica quanto un elemento flessibile può crescere rispetto agli altri.
`flexShrink`	Specifica quanto un elemento flessibile può restringersi rispetto agli altri.
`flexWrap`	Specifica se gli elementi flessibili possono andare a capo.
`font`	Definisce una serie di proprietà del font in un'unica dichiarazione.
`fontFamily`	Specifica il nome del font o una lista di font preferiti per il testo.
`fontSize`	Specifica la dimensione del font del testo.
`fontStyle`	Specifica lo stile del font del testo.
`fontVariant`	Specifica la variante di font da utilizzare per il testo.
`fontWeight`	Specifica la spessore del font del testo.
`fontSizeAdjust`	Specifica come regolare la dimensione del font in relazione alla dimensione del contenitore.
`fontStretch`	Specifica l'allungamento del font del testo.
`gap`	Specifica la distanza tra gli elementi in un layout di griglia.
`grid`	Definisce una serie di proprietà per un layout di griglia.
`gridArea`	Specifica l'area in cui un elemento deve essere posizionato in un layout di griglia.
`gridAutoColumns`	Specifica la dimensione automatica delle colonne in un layout di griglia.
`gridAutoFlow`	Specifica come posizionare automaticamente gli elementi aggiunti in un layout di griglia.
`gridAutoRows`	Specifica la dimensione automatica delle righe in un layout di griglia.
`gridColumn`	Specifica le colonne in cui posizionare un elemento in un layout di griglia.
`gridColumnEnd`	Specifica la fine di un intervallo di colonne in un layout di griglia.
`gridColumnGap`	Specifica la distanza tra le colonne in un layout di griglia.
`gridColumnStart`	Specifica l'inizio di un intervallo di colonne in un layout di griglia.
`gridGap`	Specifica la distanza tra righe e colonne in un layout di griglia.
`gridRow`	Specifica le righe in cui posizionare un elemento in un layout di griglia.
`gridRowEnd`	Specifica la fine di un intervallo di righe in un layout di griglia.
`gridRowGap`	Specifica la distanza tra le righe in un layout di griglia.
`gridRowStart`	Specifica l'inizio di un intervallo di righe in un layout di griglia.
`gridTemplate`	Specifica una griglia di layout utilizzando una sintassi di templating.
`gridTemplateAreas`	Specifica un modello di griglia utilizzando nomi di area.
`gridTemplateColumns`	Specifica le dimensioni delle colonne in un layout di griglia utilizzando una sintassi di templating.
`gridTemplateRows`	Specifica le dimensioni delle righe in un layout di griglia utilizzando una sintassi di templating.
`height`	Specifica l'altezza di un elemento.
`hyphens`	Specifica come separare le parole quando si verifica il riempimento della riga.
`imageOrientation`	Specifica l'orientamento di un'immagine.
`imageRendering`	Specifica come un'immagine dovrebbe essere resa.
`imageResolution`	Specifica la risoluzione di un'immagine.
`initialLetter`	Specifica lo stile della prima lettera del testo all'interno di un elemento.
`inlineSize`	Specifica la dimensione inline di un elemento flessibile.
`isolation`	Specifica come isolare un elemento lungo l'asse Z.
`justifyContent`	Specifica l'allineamento degli elementi lungo l'asse principale di un contenitore flessibile.
`justifyItems`	Specifica l'allineamento degli elementi lungo l'asse principale all'interno di un contenitore flessibile.
`justifySelf`	Specifica l'allineamento di un elemento lungo l'asse principale all'interno di un contenitore flessibile.
`left`	Specifica la distanza tra il bordo sinistro di un elemento e il bordo sinistro dell'elemento genitore.
`letterSpacing`	Specifica lo spazio aggiuntivo tra i caratteri di un testo.
`lineBreak`	Specifica come deve essere gestito il riempimento di riga all'interno di un testo.
`lineHeight`	Specifica la distanza tra le righe di un testo.
`listStyle`	Definisce una serie di proprietà dello stile degli elenchi in un'unica dichiarazione.
`listStyleImage`	Specifica un'immagine da utilizzare come marcatore di elenco.
`listStylePosition`	Specifica la posizione del marcatore di elenco rispetto al contenuto.
`listStyleType`	Specifica il tipo di marcatore di elenco da utilizzare.
`margin`	Definisce una serie di margini in un'unica dichiarazione.
`marginBottom`	Specifica il margine inferiore di un elemento.
`marginLeft`	Specifica il margine sinistro di un elemento.
`marginRight`	Specifica il margine destro di un elemento.
`marginTop`	Specifica il margine superiore di un elemento.
`markerOffset`	Specifica la distanza tra il marcatore e il testo di un elemento.
`marks`	Specifica gli elementi da includere quando si generano i segni di taglio e di croce.
`mask`	Specifica un'immagine come maschera per un elemento.
`maskType`	Specifica il tipo di maschera da utilizzare.
`maxHeight`	Specifica l'altezza massima di un elemento.
`maxWidth`	Specifica la larghezza massima di un elemento.
`minHeight`	Specifica l'altezza minima di un elemento.
`minWidth`	Specifica la larghezza minima di un elemento.
`mixBlendMode`	Specifica come combinare il colore di un elemento con il colore dello sfondo.
`objectFit`	Specifica come posizionare un'immagine o un video all'interno di un elemento contenitore.
`objectPosition`	Specifica la posizione di un'immagine o di un video all'interno di un elemento contenitore.
`opacity`	Specifica il livello di trasparenza di un elemento.
`order`	Specifica l'ordine di un elemento flessibile in un contenitore flessibile.
`orphans`	Specifica il numero minimo di righe rimaste in fondo a una pagina quando si verifica un'interruzione di pagina all'interno di un elemento.
`outline`	Definisce una serie di proprietà del contorno in un'unica dichiarazione.
`outlineColor`	Specifica il colore del contorno di un elemento.
`outlineOffset`	Specifica la distanza tra il contorno e il bordo di un elemento.
`outlineStyle`	Specifica lo stile del contorno di un elemento.
`outlineWidth`	Specifica la larghezza del contorno di un elemento.
`overflow`	Specifica come gestire il contenuto che supera i limiti di un elemento.
`overflowAnchor`	Specifica da quale parte del contenuto di un elemento in overflow si inizia a scorrere quando viene selezionato.
`overflowWrap`	Specifica come gestire il testo di un elemento quando supera i limiti dell'area di contenuto.
`overflowX`	Specifica come gestire il contenuto che supera i limiti orizzontali di un elemento.
`overflowY`	Specifica come gestire il contenuto che supera i limiti verticali di un elemento.
`padding`	Definisce una serie di padding in un'unica dichiarazione.
`paddingBottom`	Specifica il padding inferiore di un elemento.
`paddingLeft`	Specifica il padding sinistro di un elemento.
`paddingRight`	Specifica il padding destro di un elemento.
`paddingTop`	Specifica il padding superiore di un elemento.
`pageBreakAfter`	Specifica il comportamento di interruzione di pagina dopo un elemento.
`pageBreakBefore`	Specifica il comportamento di interruzione di pagina prima di un elemento.
`pageBreakInside`	Specifica il comportamento di interruzione di pagina all'interno di un elemento.
`perspective`	Specifica la lunghezza alla quale un elemento viene visualizzato in prospettiva all'interno di una scena 3D.
`perspectiveOrigin`	Specifica il punto di vista della prospettiva quando un elemento viene visualizzato in 3D.
`placeContent`	Specifica l'allineamento sia lungo l'asse principale sia lungo l'asse incrociato di un contenitore flessibile.
`placeItems`	Specifica l'allineamento sia lungo l'asse principale sia lungo l'asse incrociato all'interno di un contenitore flessibile.
`placeSelf`	Specifica l'allineamento di un elemento lungo l'asse principale e lungo l'asse incrociato all'interno di un contenitore flessibile.
`pointerEvents`	Specifica se gli eventi del mouse devono essere ascoltati da un elemento.
`position`	Specifica il tipo di posizionamento utilizzato per un elemento.
`quotes`	Specifica le virgolette da utilizzare con l'elemento quotato.
`resize`	Specifica se e come un utente può ridimensionare un elemento.
`right`	Specifica la distanza tra il bordo destro di un elemento e il bordo destro dell'elemento genitore.
`rowGap`	Specifica la distanza tra le righe di un layout di griglia.
`rubyAlign`	Specifica l'allineamento tra il testo ruby e il testo base.
`rubyMerge`	Specifica come devono essere gestiti i caratteri ruby quando si sovrappongono.
`rubyPosition`	Specifica la posizione dei caratteri ruby rispetto al testo base.
`scrollBehavior`	Specifica l'animazione dello scorrimento quando si utilizza la funzionalità di scorrimento per questo elemento.
`scrollMargin`	Specifica l'area esterna per l'area di visualizzazione di uno scorrimento.
`scrollMarginBlock`	Specifica l'area esterna per l'area di visualizzazione del blocco di uno scorrimento.
`scrollMarginBlockEnd`	Specifica l'area esterna per l'area di visualizzazione del bordo inferiore del blocco di uno scorrimento.
`scrollMarginBlockStart`	Specifica l'area esterna per l'area di visualizzazione del bordo superiore del blocco di uno scorrimento.
`scrollMarginBottom`	Specifica l'area esterna per l'area di visualizzazione del margine inferiore di uno scorrimento.
`scrollMarginInline`	Specifica l'area esterna per l'area di visualizzazione dell'elemento inline di uno scorrimento.
`scrollMarginInlineEnd`	Specifica l'area esterna per l'area di visualizzazione del bordo finale dell'elemento inline di uno scorrimento.
`scrollMarginInlineStart`	Specifica l'area esterna per l'area di visualizzazione del bordo iniziale dell'elemento inline di uno scorrimento.
`scrollMarginLeft`	Specifica l'area esterna per l'area di visualizzazione del margine sinistro di uno scorrimento.
`scrollMarginRight`	Specifica l'area esterna per l'area di visualizzazione del margine destro di uno scorrimento.
`scrollMarginTop`	Specifica l'area esterna per l'area di visualizzazione del margine superiore di uno scorrimento.
`scrollPadding`	Specifica l'area interna per l'area di visualizzazione di uno scorrimento.
`scrollPaddingBlock`	Specifica l'area interna per l'area di visualizzazione del blocco di uno scorrimento.
`scrollPaddingBlockEnd`	Specifica l'area interna per l'area di visualizzazione del bordo inferiore del blocco di uno scorrimento.
`scrollPaddingBlockStart`	Specifica l'area interna per l'area di visualizzazione del bordo superiore del blocco di uno scorrimento.
`scrollPaddingBottom`	Specifica l'area interna per l'area di visualizzazione del margine inferiore di uno scorrimento.
`scrollPaddingInline`	Specifica l'area interna per l'area di visualizzazione dell'elemento inline di uno scorrimento.
`scrollPaddingInlineEnd`	Specifica l'area interna per l'area di visualizzazione del bordo finale dell'elemento inline di uno scorrimento.
`scrollPaddingInlineStart`	Specifica l'area interna per l'area di visualizzazione del bordo iniziale dell'elemento inline di uno scorrimento.
`scrollPaddingLeft`	Specifica l'area interna per l'area di visualizzazione del margine sinistro di uno scorrimento.
`scrollPaddingRight`	Specifica l'area interna per l'area di visualizzazione del margine destro di uno scorrimento.
`scrollPaddingTop`	Specifica l'area interna per l'area di visualizzazione del margine superiore di uno scorrimento.
`scrollSnapAlign`	Specifica l'allineamento di uno scorrimento quando termina.
`scrollSnapStop`	Specifica se uno scorrimento deve arrestarsi sulle posizioni definite.
`scrollSnapType`	Specifica come deve essere effettuato uno scorrimento.
`shapeImageThreshold`	Specifica il livello di trasparenza che un'immagine deve avere per essere utilizzata come forma.
`shapeMargin`	Specifica la distanza tra il bordo di un elemento e il bordo di una forma.
`shapeOutside`	Specifica la forma che un elemento dovrebbe avere, per far sì che il contenuto fluisca intorno ad essa.
`tabSize`	Specifica il numero di spazi di tabulazione da utilizzare per il testo tabulato.
`tableLayout`	Specifica l'algoritmo di rendering da utilizzare per disegnare le celle, le righe e le colonne di una tabella.
`textAlign`	Specifica l'allineamento del testo all'interno di un elemento.
`textAlignLast`	Specifica l'allineamento dell'ultima riga o dell'ultima linea di testo all'interno di un elemento.
`textCombineUpright`	Specifica come combinare il testo in un elemento quando è disposto verticalmente.
`textDecoration`	Specifica lo stile della decorazione del testo (come sottolineato, barrato o lampeggiante).
`textDecorationColor`	Specifica il colore della decorazione del testo.
`textDecorationLine`	Specifica il tipo di decorazione da applicare al testo (come sottolineato o barrato).
`textDecorationStyle`	Specifica lo stile della decorazione del testo (come solido, ondulato o punteggiato).
`textEmphasis`	Specifica l'accento del testo aggiuntivo da applicare al testo.
`textEmphasisColor`	Specifica il colore dell'accento del testo.
`textEmphasisPosition`	Specifica la posizione dell'accento del testo rispetto al testo.
`textEmphasisStyle`	Specifica lo stile dell'accento del testo (come punti, cerchi o linee).
`textIndent`	Specifica l'indentazione della prima riga di testo all'interno di un elemento.
`textJustify`	Specifica come distribuire lo spazio extra tra le parole quando il testo è allineato sia a sinistra che a destra.
`textOrientation`	Specifica la direzione del testo all'interno di un elemento.
`textOverflow`	Specifica come gestire il testo che supera i limiti dell'area di contenuto di un elemento.
`textRendering`	Specifica la qualità di rendering del testo all'interno di un elemento.
`textShadow`	Specifica l'ombreggiatura del testo all'interno di un elemento.
`textSizeAdjust`	Specifica come adattare la dimensione del testo in base alle dimensioni del font predefinito del dispositivo.
`textTransform`	Specifica come trasformare il testo (come maiuscolo, minuscolo o in maiuscolo iniziale).
`textUnderlinePosition`	Specifica la posizione dell'ulteriore sottolineatura del testo all'interno di un elemento.
`top`	Specifica la distanza tra il bordo superiore di un elemento e il bordo superiore dell'elemento genitore.
`touchAction`	Specifica come gestire gli eventi di tocco all'interno di un elemento.
`transform`	Specifica una trasformazione 2D o 3D da applicare a un elemento.
`transformBox`	Specifica come viene determinata l'area di applicazione di una trasformazione.
`transformOrigin`	Specifica il punto intorno al quale viene eseguita una trasformazione.
`transformStyle`	Specifica come gli elementi figlio di un elemento trasformato devono essere posizionati nello spazio 3D.
`transition`	Specifica una serie di transizioni da applicare a un elemento.
`transitionDelay`	Specifica il ritardo prima che una transizione inizi.
`transitionDuration`	Specifica la durata di una transizione.
`transitionProperty`	Specifica le proprietà CSS che dovrebbero essere animate durante una transizione.
`transitionTimingFunction`	Specifica la funzione di temporizzazione da utilizzare durante una transizione.
`unicodeBidi`	Specifica il livello di incorporazione del testo in un elemento.
`userSelect`	Specifica se l'utente può selezionare il testo all'interno di un elemento.
`verticalAlign`	Specifica l'allineamento verticale di un elemento inline o di una cella di tabella.
`visibility`	Specifica la visibilità di un elemento.
`whiteSpace`	Specifica come gestire lo spazio vuoto all'interno di un elemento.
`widows`	Specifica il numero minimo di righe rimaste in cima a una pagina quando si verifica un'interruzione di pagina all'interno di un elemento.
`width`	Specifica la larghezza di un elemento.
`willChange`	Specifica quali proprietà CSS cambieranno in futuro per un elemento.
`windowInset`	Specifica la larghezza degli insetti della finestra del browser.
`wordBreak`	Specifica come deve essere effettuato il riempimento di parola quando il testo supera i limiti dell'area di contenuto di un elemento.
`wordSpacing`	Specifica lo spazio aggiuntivo tra le parole di un testo.
`wordWrap`	Specifica come gestire il testo di un elemento quando supera i limiti dell'area di contenuto.
`writingMode`	Specifica la direzione di scrittura del testo all'interno di un elemento.
`zIndex`	Specifica l'ordine di sovrapposizione di un elemento all'interno del contesto di impilamento.

Prova!Completa gli spazi vuoti con il testo appropriato.

// Imposta lo stile del margine dell'elemento (margin)
document.getElementById("elemento").. = "0";