.getPropertyValue()

Получаем строку с CSS-свойством элемента

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

Метод getPropertyValue() возвращает строку, в которой записано значение указанного CSS-свойства. Если свойство не указано, возвращает пустую строку.

Как пишется

Секция статьи "Как пишется"
        
          
          element.getPropertyValue('value');
          element.getPropertyValue('value');

        
        
          
        
      

Пример

Секция статьи "Пример"

Создадим блочный элемент размером 100 на 200 пикселей.

        
          
          <div class="block"></div>
          <div class="block"></div>

        
        
          
        
      
        
          
          .block {  background-color: aqua;  width: 100px;  height: 200px;}
          .block {
  background-color: aqua;
  width: 100px;
  height: 200px;
}

        
        
          
        
      

Запишем ширину элемента в переменную и выведем её на экран:

        
          
          const block = document.querySelector('.block');const styles = window.getComputedStyle(block); // получаем все стили элементаconst width = styles.getPropertyValue('width');console.log(width); // 100px
          const block = document.querySelector('.block');
const styles = window.getComputedStyle(block); // получаем все стили элемента
const width = styles.getPropertyValue('width');
console.log(width); // 100px