Czasami możemy chcieć uzyskać wartość właściwości CSS elementu za pomocą JavaScript.

W tym artykule przyjrzymy się, jak uzyskać wartość właściwości CSS elementu za pomocą JavaScript.

Użyj metody window.getComputedStyle

Możemy użyć tej window,getComputedStylemetody, aby uzyskać obliczone style CSS elementu.

Na przykład, jeśli mamy następujący kod 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)

Mamy forpętlę do dodania 100 pelementów do div za pomocą document.createElement.

Następnie ustawiamy textContentkażdy element, aby dodać jakąś zawartość.

A potem wywołujemy div.appendChilddodanie pelementów jako dzieci div.

Następnie wywołujemy window.getComputedStylez divdostać styleprzedmiot.

A potem możemy uzyskać heightnieruchomość za pomocą:

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

Użyj metody computedStyleMap elementu

Ponadto możemy użyć computedStyleMapmetody dostarczanej z elementami, aby uzyskać style zastosowane do elementu.

Na przykład mamy następujący kod 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)

Następnie wywołujemy, div.computedStyleMapaby uzyskać styleobiekt, którego możemy użyć do uzyskania stylów.

A potem mamy:

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

Tym razem heightpowinno być:

{value: 300, unit: "px"}

Wniosek

Jest kilka sposobów, za pomocą których możemy uzyskać właściwości CSS z elementu za pomocą JavaScript.

Więcej treści na plainenglish.io