Клавиша / 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