Получение текущего используемого значения 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.