/ ↲
    Расширенный поиск

    JavaScript

    .removeProperty()

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

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

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

    1. Кратко
    2. Пример
    3. Как пишется
    4. Как понять

    Кратко

    Метод 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;

    Читайте также