A volte, potremmo voler ottenere un valore di proprietà CSS di un elemento con JavaScript.

In questo articolo, vedremo come ottenere un valore di proprietà CSS di un elemento con JavaScript.

Utilizzare il metodo window.getComputedStyle

Possiamo usare il window,getComputedStylemetodo per ottenere gli stili CSS calcolati di un elemento.

Ad esempio, se abbiamo il seguente HTML:

<div style='height: 300px; overflow-y: auto'>
</div>

const div = document.querySelector('div')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  div.appendChild(p)
}
const style = window.getComputedStyle(div);
const height = style.getPropertyValue('height');
console.log(height)

Abbiamo il forciclo per aggiungere 100 pelementi nel div con document.createElement.

Quindi impostiamo il textContentdi ogni elemento per aggiungere del contenuto.

E poi chiamiamo div.appendChildad aggiungere gli pelementi come figli del div.

Successivamente, chiamiamo window.getComputedStylecon divper ottenere un styleoggetto.

E poi possiamo ottenere la heightproprietà con:

const height = style.getPropertyValue('height');

Utilizzare il metodo computedStyleMap dell'elemento

Inoltre, possiamo usare il computedStyleMapmetodo fornito con gli elementi per ottenere gli stili applicati all'elemento.

Ad esempio, abbiamo il seguente HTML:

<div style='height: 300px; overflow-y: auto'>
</div>

const div = document.querySelector('div')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  div.appendChild(p)
}
const style = div.computedStyleMap();
const height = style.get('height');
console.log(height)

Quindi chiamiamo div.computedStyleMapper ottenere un styleoggetto che possiamo usare per ottenere gli stili.

E poi abbiamo:

const height = style.get('height');

Questa volta heightdovrebbe essere:

{value: 300, unit: "px"}

Conclusione

Ci sono alcuni modi che possiamo usare per ottenere le proprietà CSS da un elemento con JavaScript.

Altri contenuti su plainenglish.io