dimayakovlev.ru


Получение текущего используемого значения CSS свойства элемента

Для получения текущего используемого значения CSS свойства стиля элемента в JavaScript следует использовать метод window.getComputedStyle. В зависимости от запрашиваемого свойства стиля, этот метод позволяет получить вычисленное или окончательное значение.

Например, для получения высоты элемента, определяемого CSS свойством height, метод window.getComputedStyle может использоваться следующим образом.

<style type="text/css">
  #element-id {
    background-color: blue;
    color: yellow;
    min-height: 25vh;
    padding: 1em;
  }
</style>

<p id="element-id"></p>

<script type="text/javascript">
  var elementID = "element-id";
  var element = document.getElementById(elementID);

  function printHeight() {
    var style = window.getComputedStyle(element);
    var height = style.getPropertyValue('height');
    element.innerHTML = 'Высота элемента #' + elementID + ': ' + height;
  }

  printHeight();

  window.onresize = printHeight;
</script>

Результат выполнения приведённого фрагмента кода показан ниже. Изменяйте размер окна браузера, чтобы увидеть пересчитанное значение высоты элемента в пикселях.

Прочитать подробнее о методе window.getComputedStyle можно в справке Mozilla Developer Network.