From db9ae427e9eec8f5760486df904f0be0ad8c8536 Mon Sep 17 00:00:00 2001 From: Kiryshka1922 Date: Sat, 21 Mar 2026 18:04:32 +0300 Subject: [PATCH 1/9] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=BD=D0=BE=D0=B2=D1=8B=D0=B5=20=D0=BF=D1=80?= =?UTF-8?q?=D0=B8=D0=BC=D0=B5=D1=80=D1=8B=20=D0=B8=20=D0=BD=D1=8E=D0=B0?= =?UTF-8?q?=D0=BD=D1=81=D1=8B=20=D0=BC=D0=B5=D1=82=D0=BE=D0=B4=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/element-remove-property/demos/index.html | 26 ++++++------ js/element-remove-property/index.md | 47 ++++++++++++++++++--- people/kiryshka1922/index.md | 6 +++ 3 files changed, 60 insertions(+), 19 deletions(-) create mode 100644 people/kiryshka1922/index.md diff --git a/js/element-remove-property/demos/index.html b/js/element-remove-property/demos/index.html index c4f80c4092..11dcf277c8 100644 --- a/js/element-remove-property/demos/index.html +++ b/js/element-remove-property/demos/index.html @@ -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 @@ -
+
diff --git a/js/element-remove-property/index.md b/js/element-remove-property/index.md index 5f5d3cca9e..ef20783eca 100644 --- a/js/element-remove-property/index.md +++ b/js/element-remove-property/index.md @@ -3,10 +3,11 @@ title: ".removeProperty()" description: "Удаляем CSS-свойство у элемента." authors: - bellabzhu + - kiryshka1922 related: - js/element-style - - css/specificity - js/css-style-declaration + - /js/element-classlist/ tags: - doka - placeholder @@ -14,7 +15,7 @@ tags: ## Кратко -Метод [`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-свойство у элемента, возвращая его к значению по умолчанию или удаляя его полностью из стиля элемента. ## Пример @@ -34,22 +35,56 @@ function turnToSquare () { `removeProperty()` принимает один аргумент — строку с именем свойства. Пишем названия так же, как в CSS: `background-color`, а не `backgroundColor`. +Метод возвращает строку со старым значением удаленного свойства. Если свойство не было установлено, метод вернёт пустую строку `''`. ```js vampire.style.removeProperty('box-shadow') ``` ## Как понять -Метод `removeProperty()` удаляет отдельное CSS-свойство элемента. +Метод `removeProperty()` удаляет отдельное CSS-свойство элемента. Доступен метод в интерфейсе [CSSStyleDeclaration]("js/css-style-declaration/"). -Чтобы управлять отображением элемента, лучше использовать чистый CSS, устанавливая элементу классы-модификаторы с нужным набором стилей. +### Инлайн-стили и вычисленные стили -Иногда полезно программно изменять CSS-свойства. Например, если в нужный момент установить элементу свойство `will-change`, а потом удалить его, то можно получить выигрыш по производительности. +Удалить свойство получится только для `inline` стилей. Для вычисленных стилей выбрасывается ошибка `NoModificationAllowedError`, потому что свойство элемента находится в режиме `read-only`, и изменять их напрямую не получится. -Если с помощью метода `removeProperty()` не выходит удалить свойство, и вы получаете ошибку `NoModificationAllowedError`, значит элемент или его свойство находится в режиме `read-only`. +```js +const circle = document.getElementById('round') +// ❌ Так работать не будет +window.getComputedStyle(circle).removeProperty('border-radius') +``` + +Однако удалять свойства из таблиц стилей всё же можно, обратившись к CSSRule +```js +const circle = document.getElementById('round') +// ✅ Так работать будет +const declaration = document.styleSheets[0].cssRules[1].style; +declaration.removeProperty('border-radius') +``` + +Один из полезных сценариев использования `removeProperty()` — управление подсказками для браузера с помощью свойства `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_: +Чтобы управлять отображением элемента и менять вычисленные стили, лучше использовать другой подход, устанавливая элементу классы-модификаторы с нужным набором стилей. Для этого можно использовать [ClassList](/js/element-classlist/) + ```js vampire.style.boxShadow = null ``` diff --git a/people/kiryshka1922/index.md b/people/kiryshka1922/index.md new file mode 100644 index 0000000000..3305151e5c --- /dev/null +++ b/people/kiryshka1922/index.md @@ -0,0 +1,6 @@ +--- +name: 'Кирилл Белоусов' +url: https://github.com/Kiryshka1922 +badges: + - first-contribution-small +--- From 88bb9ebc4ab373512fd184d80fd99862db3a8fd0 Mon Sep 17 00:00:00 2001 From: Kiryshka1922 Date: Sat, 21 Mar 2026 18:46:14 +0300 Subject: [PATCH 2/9] =?UTF-8?q?=D0=A0=D0=B5=D0=B4=D0=B0=D0=BA=D1=82=D1=83?= =?UTF-8?q?=D1=80=D0=B0=20=D0=B8=20=D0=B1=D0=B5=D0=B9=D0=B4=D0=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/element-remove-property/index.md | 31 +++++++++++++++-------------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/js/element-remove-property/index.md b/js/element-remove-property/index.md index ef20783eca..989dfb2f68 100644 --- a/js/element-remove-property/index.md +++ b/js/element-remove-property/index.md @@ -7,10 +7,9 @@ authors: related: - js/element-style - js/css-style-declaration - - /js/element-classlist/ + - js/element-classlist tags: - doka - - placeholder --- ## Кратко @@ -21,12 +20,12 @@ tags: -Превращаем круг в квадрат. +Превращаем круг в квадрат: ```js const circle = document.getElementById('round') -function turnToSquare () { +function turnToSquare() { circle.style.removeProperty('border-radius') } ``` @@ -35,26 +34,27 @@ function turnToSquare () { `removeProperty()` принимает один аргумент — строку с именем свойства. Пишем названия так же, как в CSS: `background-color`, а не `backgroundColor`. -Метод возвращает строку со старым значением удаленного свойства. Если свойство не было установлено, метод вернёт пустую строку `''`. +Метод возвращает строку со старым значением удаленного свойства. Если свойство не было установлено, метод вернёт пустую строку `''` ```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-свойство элемента. Доступен метод в интерфейсе [CSSStyleDeclaration]("js/css-style-declaration/"). +Метод `removeProperty()` удаляет отдельное CSS-свойство элемента. Доступен метод в интерфейсе [CSSStyleDeclaration](/js/css-style-declaration/). -### Инлайн-стили и вычисленные стили - -Удалить свойство получится только для `inline` стилей. Для вычисленных стилей выбрасывается ошибка `NoModificationAllowedError`, потому что свойство элемента находится в режиме `read-only`, и изменять их напрямую не получится. +Удалить свойство получится только для `inline` стилей. Для вычисленных стилей выбрасывается ошибка `NoModificationAllowedError`, потому что свойства элемента находятся в режиме `read-only`, и изменять их напрямую не получится. ```js const circle = document.getElementById('round') -// ❌ Так работать не будет +// ❌ Ошибка! Uncaught NoModificationAllowedError window.getComputedStyle(circle).removeProperty('border-radius') ``` -Однако удалять свойства из таблиц стилей всё же можно, обратившись к CSSRule +Однако удалять свойства из таблиц стилей всё же можно, обратившись к CSSRules. + +⚠️ **Важно**: этот способ требует точного знания структуры таблиц стилей и может быть ненадёжным в случае подключения новых стилей. ```js const circle = document.getElementById('round') // ✅ Так работать будет @@ -62,7 +62,7 @@ const declaration = document.styleSheets[0].cssRules[1].style; declaration.removeProperty('border-radius') ``` -Один из полезных сценариев использования `removeProperty()` — управление подсказками для браузера с помощью свойства `will-change`: +🚀 Один из полезных сценариев использования `removeProperty()` — управление подсказками для браузера с помощью свойства `will-change`: ```js const animatedElement = document.getElementById('animated') @@ -75,6 +75,7 @@ function startAnimation() { animatedElement.classList.add('animate') // После завершения анимации удаляем подсказку, чтобы освободить память + // и не занимать ресурсы браузера излишними обещаниями анимации setTimeout(() => { animatedElement.style.removeProperty('will-change') }, 1000) @@ -83,8 +84,8 @@ function startAnimation() { Есть альтернатива — можно использовать [`style`](/js/element-style/) и указать свойству значение `null`. Названия в этом случае пишем через _camelCase_: -Чтобы управлять отображением элемента и менять вычисленные стили, лучше использовать другой подход, устанавливая элементу классы-модификаторы с нужным набором стилей. Для этого можно использовать [ClassList](/js/element-classlist/) - ```js vampire.style.boxShadow = null ``` + +Чтобы управлять отображением элемента и менять вычисленные стили, лучше использовать другой подход, устанавливая элементу классы-модификаторы с нужным набором стилей. Для этого можно использовать [ClassList](/js/element-classlist/) From 227bf5c419a4567a43dad22dc649c89f10a7e8e6 Mon Sep 17 00:00:00 2001 From: Kirill Belousov Date: Sat, 21 Mar 2026 21:54:19 +0300 Subject: [PATCH 3/9] Update js/element-remove-property/index.md Co-authored-by: Vitya <9317613+vitya-ne@users.noreply.github.com> --- js/element-remove-property/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/element-remove-property/index.md b/js/element-remove-property/index.md index 989dfb2f68..ff22132e5a 100644 --- a/js/element-remove-property/index.md +++ b/js/element-remove-property/index.md @@ -14,7 +14,7 @@ tags: ## Кратко -Метод [`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-свойство у элемента, возвращая его к значению по умолчанию или удаляя его полностью из стиля элемента. ## Пример From 9b087c29207e89b5a3fbde450ec0f6a02c1fdb50 Mon Sep 17 00:00:00 2001 From: Kirill Belousov Date: Sat, 21 Mar 2026 21:55:03 +0300 Subject: [PATCH 4/9] Update js/element-remove-property/index.md Co-authored-by: Vitya <9317613+vitya-ne@users.noreply.github.com> --- js/element-remove-property/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/element-remove-property/index.md b/js/element-remove-property/index.md index ff22132e5a..275a8da4cb 100644 --- a/js/element-remove-property/index.md +++ b/js/element-remove-property/index.md @@ -34,7 +34,7 @@ function turnToSquare() { `removeProperty()` принимает один аргумент — строку с именем свойства. Пишем названия так же, как в CSS: `background-color`, а не `backgroundColor`. -Метод возвращает строку со старым значением удаленного свойства. Если свойство не было установлено, метод вернёт пустую строку `''` +Метод возвращает строку со старым значением удалённого свойства. Если свойство не было установлено, метод вернёт пустую строку `''`. ```js const oldShadow = vampire.style.removeProperty('box-shadow') console.log(oldShadow) // '0 0 10px rgba(0,0,0,0.5)' From f2d25af4d5d792f3f76acca95ead1ca806813159 Mon Sep 17 00:00:00 2001 From: Kirill Belousov Date: Sat, 21 Mar 2026 21:59:41 +0300 Subject: [PATCH 5/9] Update js/element-remove-property/index.md Co-authored-by: Vitya <9317613+vitya-ne@users.noreply.github.com> --- js/element-remove-property/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/element-remove-property/index.md b/js/element-remove-property/index.md index 275a8da4cb..2db18a41bd 100644 --- a/js/element-remove-property/index.md +++ b/js/element-remove-property/index.md @@ -62,7 +62,7 @@ const declaration = document.styleSheets[0].cssRules[1].style; declaration.removeProperty('border-radius') ``` -🚀 Один из полезных сценариев использования `removeProperty()` — управление подсказками для браузера с помощью свойства `will-change`: +🚀 Один из полезных сценариев использования `removeProperty()` — управление подсказками для браузера с помощью свойства [`will-change`](/css/will-change/): ```js const animatedElement = document.getElementById('animated') From 6bcf528df0a6d08a025430d5b7ada0c76c0f9df7 Mon Sep 17 00:00:00 2001 From: Kiryshka1922 Date: Sat, 21 Mar 2026 22:04:29 +0300 Subject: [PATCH 6/9] =?UTF-8?q?=D0=A0=D0=B5=D0=B4=D0=B0=D0=BA=D1=82=D1=83?= =?UTF-8?q?=D1=80=D0=B0=20=D0=BF=D0=BE=D1=81=D0=BB=D0=B5=20=D1=80=D0=B5?= =?UTF-8?q?=D0=B2=D1=8C=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/element-remove-property/index.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/js/element-remove-property/index.md b/js/element-remove-property/index.md index 2db18a41bd..a16e905d96 100644 --- a/js/element-remove-property/index.md +++ b/js/element-remove-property/index.md @@ -44,15 +44,16 @@ console.log(oldShadow) // '0 0 10px rgba(0,0,0,0.5)' Метод `removeProperty()` удаляет отдельное CSS-свойство элемента. Доступен метод в интерфейсе [CSSStyleDeclaration](/js/css-style-declaration/). -Удалить свойство получится только для `inline` стилей. Для вычисленных стилей выбрасывается ошибка `NoModificationAllowedError`, потому что свойства элемента находятся в режиме `read-only`, и изменять их напрямую не получится. +Удалить свойство получится только для `inline` стилей. Для `read-only` свойств выбрасывается ошибка `NoModificationAllowedError`, изменять их напрямую не получится. +Например, вычисленные стили (`computed styles`) — это то, что браузер рассчитал, применив все CSS-правила к элементу. Их нельзя изменить напрямую: ```js const circle = document.getElementById('round') // ❌ Ошибка! Uncaught NoModificationAllowedError window.getComputedStyle(circle).removeProperty('border-radius') ``` -Однако удалять свойства из таблиц стилей всё же можно, обратившись к CSSRules. +Однако удалять свойства из таблиц стилей всё же можно, обратившись к CSSRules. ⚠️ **Важно**: этот способ требует точного знания структуры таблиц стилей и может быть ненадёжным в случае подключения новых стилей. ```js From 97340a39b0957690efdc7dd39fa8b002a316ab59 Mon Sep 17 00:00:00 2001 From: Kiryshka1922 Date: Sat, 21 Mar 2026 22:11:52 +0300 Subject: [PATCH 7/9] =?UTF-8?q?=D0=A0=D0=B5=D0=B4=D0=B0=D0=BA=D1=82=D1=83?= =?UTF-8?q?=D1=80=D0=B0=20=D0=BF=D0=BE=D1=81=D0=BB=D0=B5=20=D1=80=D0=B5?= =?UTF-8?q?=D0=B2=D1=8C=D1=8E=20X2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/element-remove-property/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/element-remove-property/index.md b/js/element-remove-property/index.md index a16e905d96..0b2dfcf45b 100644 --- a/js/element-remove-property/index.md +++ b/js/element-remove-property/index.md @@ -32,7 +32,7 @@ function turnToSquare() { ## Как пишется -`removeProperty()` принимает один аргумент — строку с именем свойства. Пишем названия так же, как в CSS: `background-color`, а не `backgroundColor`. +`removeProperty()` принимает один аргумент — строку с именем свойства. Название должно соответствовать CSS-формату **kebab-case**: слова разделяются дефисом, например `background-color`. Верблюжья нотация (`backgroundColor`) не подойдёт. Регистр букв значения не имеет — `BACKGROUND-COLOR` тоже сработает. Метод возвращает строку со старым значением удалённого свойства. Если свойство не было установлено, метод вернёт пустую строку `''`. ```js From d593c8bbe6c89e55f6bf6881d9b10295e8988368 Mon Sep 17 00:00:00 2001 From: Kirill Belousov Date: Sat, 21 Mar 2026 22:37:00 +0300 Subject: [PATCH 8/9] Update js/element-remove-property/index.md Co-authored-by: Vitya <9317613+vitya-ne@users.noreply.github.com> --- js/element-remove-property/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/element-remove-property/index.md b/js/element-remove-property/index.md index 0b2dfcf45b..77e93968b0 100644 --- a/js/element-remove-property/index.md +++ b/js/element-remove-property/index.md @@ -89,4 +89,4 @@ function startAnimation() { vampire.style.boxShadow = null ``` -Чтобы управлять отображением элемента и менять вычисленные стили, лучше использовать другой подход, устанавливая элементу классы-модификаторы с нужным набором стилей. Для этого можно использовать [ClassList](/js/element-classlist/) +Чтобы управлять отображением элемента и менять вычисленные стили, лучше использовать другой подход, устанавливая элементу классы-модификаторы с нужным набором стилей. Для этого можно использовать [ClassList](/js/element-classlist/). From 58704489e5089011b9265db6e4651cb9da2cd702 Mon Sep 17 00:00:00 2001 From: Kiryshka1922 Date: Sat, 21 Mar 2026 22:39:27 +0300 Subject: [PATCH 9/9] =?UTF-8?q?=D0=9A=D0=BE=D1=80=D1=80=D0=B5=D0=BA=D1=82?= =?UTF-8?q?=D0=B8=D1=80=D0=BE=D0=B2=D0=BA=D0=B0=20=D0=BF=D1=80=D0=B5=D0=B4?= =?UTF-8?q?=D0=BB=D0=BE=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/element-remove-property/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/element-remove-property/index.md b/js/element-remove-property/index.md index 77e93968b0..93b286a0ba 100644 --- a/js/element-remove-property/index.md +++ b/js/element-remove-property/index.md @@ -32,7 +32,7 @@ function turnToSquare() { ## Как пишется -`removeProperty()` принимает один аргумент — строку с именем свойства. Название должно соответствовать CSS-формату **kebab-case**: слова разделяются дефисом, например `background-color`. Верблюжья нотация (`backgroundColor`) не подойдёт. Регистр букв значения не имеет — `BACKGROUND-COLOR` тоже сработает. +`removeProperty()` принимает один аргумент — строку с именем свойства. Название должно соответствовать CSS-формату: `background-color`, а не `backgroundColor`. Регистр букв значения не имеет — `BACKGROUND-COLOR` тоже сработает. Метод возвращает строку со старым значением удалённого свойства. Если свойство не было установлено, метод вернёт пустую строку `''`. ```js