logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Info e Blog

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

StileDescrizione
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";