.removeProperty()

Метод 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. Регистр букв значения не имеет — BACKGROUND-COLOR тоже сработает.

Метод возвращает строку со старым значением удалённого свойства. Если свойство не было установлено, метод вернёт пустую строку ''.

        
          
          const oldShadow = vampire.style.removeProperty('box-shadow')console.log(oldShadow) // '0 0 10px rgba(0,0,0,0.5)'
          const oldShadow = vampire.style.removeProperty('box-shadow')
console.log(oldShadow) // '0 0 10px rgba(0,0,0,0.5)'

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Удалить свойство получится только для inline стилей. Для read-only свойств выбрасывается ошибка NoModificationAllowedError, изменять их напрямую не получится.

Например, вычисленные стили (computed styles) — это то, что браузер рассчитал, применив все CSS-правила к элементу. Их нельзя изменить напрямую:

        
          
          const circle = document.getElementById('round')// ❌ Ошибка! Uncaught NoModificationAllowedErrorwindow.getComputedStyle(circle).removeProperty('border-radius')
          const circle = document.getElementById('round')
// ❌ Ошибка! Uncaught NoModificationAllowedError
window.getComputedStyle(circle).removeProperty('border-radius')

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Однако удалять свойства из таблиц стилей всё же можно, обратившись к CSSRules.

⚠️ Важно: этот способ требует точного знания структуры таблиц стилей и может быть ненадёжным в случае подключения новых стилей.

        
          
          const circle = document.getElementById('round')// ✅ Так работать будетconst declaration = document.styleSheets[0].cssRules[1].style;declaration.removeProperty('border-radius')
          const circle = document.getElementById('round')
// ✅ Так работать будет
const declaration = document.styleSheets[0].cssRules[1].style;
declaration.removeProperty('border-radius')

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

🚀 Один из полезных сценариев использования removeProperty() — управление подсказками для браузера с помощью свойства will-change:

        
          
          const animatedElement = document.getElementById('animated')function startAnimation() {  // Подсказываем браузеру, что свойство transform будет анимироваться  animatedElement.style.willChange = 'transform'    // Запускаем анимацию  animatedElement.classList.add('animate')    // После завершения анимации удаляем подсказку, чтобы освободить память  // и не занимать ресурсы браузера излишними обещаниями анимации  setTimeout(() => {    animatedElement.style.removeProperty('will-change')  }, 1000)}
          const animatedElement = document.getElementById('animated')

function startAnimation() {
  // Подсказываем браузеру, что свойство transform будет анимироваться
  animatedElement.style.willChange = 'transform'
  
  // Запускаем анимацию
  animatedElement.classList.add('animate')
  
  // После завершения анимации удаляем подсказку, чтобы освободить память
  // и не занимать ресурсы браузера излишними обещаниями анимации
  setTimeout(() => {
    animatedElement.style.removeProperty('will-change')
  }, 1000)
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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