Клавиша / esc

.removeProperty()

Удаляем CSS-свойство у элемента

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

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

Кратко

Скопировано

Метод removeProperty() удаляет указанное CSS-свойство у элемента и возвращает значение этого свойства.

Пример

Скопировано
Открыть демо в новой вкладке

Превращаем круг в квадрат.

        
          
          const circle = document.getElementById('round');function turnToSquare () {  circle.style.removeProperty('border-radius');}
          const circle = document.getElementById('round');

function turnToSquare () {
  circle.style.removeProperty('border-radius');
}

        
        
          
        
      

Как пишется

Скопировано

removeProperty() принимает один аргумент – строку с именем свойства. Пишем названия также, как в CSS: background-color, а не backgroundColor.

        
          
          vampire.style.removeProperty('box-shadow');
          vampire.style.removeProperty('box-shadow');

        
        
          
        
      

Как понять

Скопировано

Метод removeProperty() позволяет удалить отдельное CSS-свойство элемента.

Чтобы управлять отображением элемента лучше использовать чистый CSS, устанавливая элементу классы-модификаторы с нужным набором стилей.

Но иногда полезно программно изменять CSS-свойства. Например, если в нужный момент установить элементу свойство will-change, а потом удалить его, то можно получить выигрыш по производительности.

Если с помощью метода removeProperty() не выходит удалить свойство и вы получаете ошибку "NoModificationAllowedError" – значит элемент или его свойство находится в режиме read-only.

Есть альтернатива – можно использовать style и указать свойству значение "null". Названия в этом случае пишем через camelCase:

        
          
          vampire.style.boxShadow = null;
          vampire.style.boxShadow = null;