doka-guide · Kiryshka1922 · Mar 21, 2026 · Mar 21, 2026 · Mar 21, 2026 · Mar 21, 2026
@@ -14,15 +14,25 @@
       box-sizing: border-box;
     }
 
+    #round {
+      display: block;
+      width: 120px;
+      height: 120px;
+      background-color: rgb(59, 163, 253);
+      transition: border-radius 0.2s linear;
+      flex-shrink: 0;
+    }
+
     body {
-      min-height: 100vh;
+      max-height: 100vh;
       padding: 50px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
+      gap: 20px;
       background-color: #18191c;
-      color: #FFFFFF;
+      color: #000000;
       font-family: "Roboto", sans-serif;
     }
 
@@ -32,7 +42,6 @@
       border: 2px solid transparent;
       border-radius: 6px;
       padding: 9px 15px;
-      color: #000000;
       font-size: 18px;
       font-weight: 300;
       font-family: inherit;
@@ -42,7 +51,6 @@
     .button:hover {
       background-color: #FFFFFF;
       cursor: pointer;
-      transition: background-color 0.2s linear;
     }
 
     .button:focus-visible {
@@ -67,15 +75,7 @@
   </style>
 </head>
 <body>
-  <div id="round" style="
-    display: block;
-    margin-bottom: 20px;
-    width: 120px;
-    height: 120px;
-    border-radius: 50%;
-    background-color: rgb(59, 163, 253);
-    transition: border-radius 0.2s linear
-  "></div>
+  <div id="round" style="border-radius: 50%;"></div>
   <button class="button button-yellow" onclick="turnToSquare()">
     Превратить в квадрат
   </button>

@@ -3,53 +3,90 @@ title: ".removeProperty()"
 description: "Удаляем CSS-свойство у элемента."
 authors:
   - bellabzhu
+  - kiryshka1922
 related:
   - js/element-style
-  - css/specificity
   - js/css-style-declaration
+  - js/element-classlist
 tags:
   - doka
-  - placeholder
 ---
 
 ## Кратко
 
-Метод [`removeProperty()`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/removeProperty) удаляет указанное CSS-свойство у элемента и возвращает значение этого свойства.
+Метод [`removeProperty()`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/removeProperty) позволяет удалить определённое CSS-свойство у элемента, возвращая его к значению по умолчанию или удаляя его полностью из стиля элемента.
 
 ## Пример
 
 <iframe title="Демонстрация работы метода" src="demos/index.html" height="270"></iframe>
 
-Превращаем круг в квадрат.
+Превращаем круг в квадрат:
 
 ```js
 const circle = document.getElementById('round')
 
-function turnToSquare () {
+function turnToSquare() {
   circle.style.removeProperty('border-radius')
 }
 ```
 
 ## Как пишется
 
-`removeProperty()` принимает один аргумент — строку с именем свойства. Пишем названия так же, как в CSS: `background-color`, а не `backgroundColor`.
+`removeProperty()` принимает один аргумент — строку с именем свойства. Название должно соответствовать CSS-формату: `background-color`, а не `backgroundColor`. Регистр букв значения не имеет — `BACKGROUND-COLOR` тоже сработает.
 
+Метод возвращает строку со старым значением удалённого свойства. Если свойство не было установлено, метод вернёт пустую строку `''`.
 ```js
-vampire.style.removeProperty('box-shadow')
+const oldShadow = vampire.style.removeProperty('box-shadow')
+console.log(oldShadow) // '0 0 10px rgba(0,0,0,0.5)'
 ```
 
 ## Как понять
 
-Метод `removeProperty()` удаляет отдельное CSS-свойство элемента.
+Метод `removeProperty()` удаляет отдельное CSS-свойство элемента. Доступен метод в интерфейсе [CSSStyleDeclaration](/js/css-style-declaration/).
-Метод `removeProperty()` удаляет отдельное CSS-свойство элемента. Доступен метод в интерфейсе [CSSStyleDeclaration](/js/css-style-declaration/).
+Метод `removeProperty()` удаляет отдельное CSS-свойство элемента. Метод живёт в интерфейсе [CSSStyleDeclaration](/js/css-style-declaration/).
-Метод `removeProperty()` удаляет отдельное CSS-свойство элемента. Доступен метод в интерфейсе [CSSStyleDeclaration](/js/css-style-declaration/).
+Метод `removeProperty()` удаляет отдельное CSS-свойство элемента. Метод живёт в интерфейсе [CSSStyleDeclaration](/js/css-style-declaration/).
 
-Чтобы управлять отображением элемента, лучше использовать чистый CSS, устанавливая элементу классы-модификаторы с нужным набором стилей.
+Удалить свойство получится только для `inline` стилей. Для `read-only` свойств выбрасывается ошибка `NoModificationAllowedError`, изменять их напрямую не получится.
 
-Иногда полезно программно изменять CSS-свойства. Например, если в нужный момент установить элементу свойство `will-change`, а потом удалить его, то можно получить выигрыш по производительности.
+Например, вычисленные стили (`computed styles`) — это то, что браузер рассчитал, применив все CSS-правила к элементу. Их нельзя изменить напрямую:
+```js
+const circle = document.getElementById('round')
+// ❌ Ошибка! Uncaught NoModificationAllowedError
+window.getComputedStyle(circle).removeProperty('border-radius')
+```
+
+Однако удалять свойства из таблиц стилей всё же можно, обратившись к CSSRules.
 
-Если с помощью метода `removeProperty()` не выходит удалить свойство, и вы получаете ошибку `NoModificationAllowedError`, значит элемент или его свойство находится в режиме `read-only`.
+⚠️ **Важно**: этот способ требует точного знания структуры таблиц стилей и может быть ненадёжным в случае подключения новых стилей.
+```js
+const circle = document.getElementById('round')
+// ✅ Так работать будет
+const declaration = document.styleSheets[0].cssRules[1].style;
+declaration.removeProperty('border-radius')
+```
+
+🚀 Один из полезных сценариев использования `removeProperty()` — управление подсказками для браузера с помощью свойства [`will-change`](/css/will-change/):
+
+```js
+const animatedElement = document.getElementById('animated')
+
+function startAnimation() {
+  // Подсказываем браузеру, что свойство transform будет анимироваться
+  animatedElement.style.willChange = 'transform'
+
+  // Запускаем анимацию
+  animatedElement.classList.add('animate')
+
+  // После завершения анимации удаляем подсказку, чтобы освободить память
+  // и не занимать ресурсы браузера излишними обещаниями анимации
+  setTimeout(() => {
+    animatedElement.style.removeProperty('will-change')
+  }, 1000)
+}
+```
 
 Есть альтернатива — можно использовать [`style`](/js/element-style/) и указать свойству значение `null`. Названия в этом случае пишем через _camelCase_:
 
 ```js
 vampire.style.boxShadow = null
 ```
+
+Чтобы управлять отображением элемента и менять вычисленные стили, лучше использовать другой подход, устанавливая элементу классы-модификаторы с нужным набором стилей. Для этого можно использовать [ClassList](/js/element-classlist/).
diff --git a/people/kiryshka1922/index.md b/people/kiryshka1922/index.md
@@ -0,0 +1,6 @@
+---
+name: 'Кирилл Белоусов'
+url: https://github.com/Kiryshka1922
+badges:
+  - first-contribution-small
+---