Получение значение свойств CSS через Javascript

Question

Дан абзац, через Javascript надо получить его свойство font-size, загружаю и не выводит. С другими CSS свойствами пробовал, тоже не выводит, а вот атрибуты innerHTML и id вывело.

    <p id="text">text....text....</p>
</div>
<style>
    p {
        font-size: 88px;
    }
</style>
<script>
    var text = document.getElementById('text');
    alert(text.style.fontSize);
    alert(text.innerHTML);
    alert(text.id);
</script>````

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

<div>
  <p id="text">text....text....</p>
</div>
<style>
  p {
    font-size: 88px;
  }
</style>
<script>
  var text = document.getElementById('text');
  console.log(getComputedStyle(text).fontSize);
  console.log(text.innerHTML);
</script>

Answer 2

Свойство style связано с атрибутом style. Если у элемента не указан этот атрибут - значения из этого свойства будут пустыми.

Чтобы получить вычисленное значение свойства можно воспользоваться window.getComputedStyle

БЛОГ НА HUSL

Получение значение свойств CSS через Javascript

Ответы (2 шт):