.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 rgb(0 0 0 / 0.5)'
          const oldShadow = vampire.style.removeProperty('box-shadow')
console.log(oldShadow) // '0 0 10px rgb(0 0 0 / 0.5)'

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

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

Удалить свойство получится только для инлайн-стилей. Для 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')}// Когда анимация закончилась, удаляем подсказку — она больше не нужнаanimatedElement.addEventListener('animationend', () => {  animatedElement.style.removeProperty('will-change')}, { once: true })
          const animatedElement = document.getElementById('animated')

function startAnimation() {
  // Подсказываем браузеру, что свойство transform будет анимироваться
  animatedElement.style.willChange = 'transform'

  // Запускаем анимацию
  animatedElement.classList.add('animate')
}

// Когда анимация закончилась, удаляем подсказку — она больше не нужна
animatedElement.addEventListener('animationend', () => {
  animatedElement.style.removeProperty('will-change')
}, { once: true })

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

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

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

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