Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Как ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Π΅ΡΡ‚ΡŒ Π»ΠΈ класс Ρƒ элСмСнта js

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ, содСрТит Π»ΠΈ элСмСнт класс Π² JavaScript?

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ простой JavaScript (Π½Π΅ jQuery), Π΅ΡΡ‚ΡŒ Π»ΠΈ способ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ, содСрТит Π»ΠΈ элСмСнт класс?

Π’ настоящСС врСмя я дСлаю это:

ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ссли я измСню HTML Π½Π° этот .

. Ρ‚ΠΎΡ‡Π½ΠΎΠ³ΠΎ соотвСтствия большС Π½Π΅Ρ‚, поэтому я ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽ Π²Ρ‹Π²ΠΎΠ΄ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π½ΠΈΡ‡Π΅Π³ΠΎ ( «» ). Но я всС Π΅Ρ‰Π΅ Ρ…ΠΎΡ‡Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ…ΠΎΠ΄Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ Π±Ρ‹Π»ΠΈ I have class1 , ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ <div> ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ содСрТит класс .class1 .

22 ΠΎΡ‚Π²Π΅Ρ‚Π°

Π­Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²ΠΎ всСх Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, ΠΈ Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ»ΠΈΡ„ΠΈΠ»Ρ‹ для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ².

Π’ качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ , Ссли Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ со старыми Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ ΠΈ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΠΈΡ„ΠΈΠ»Π»Ρ‹ для ΠΈΡ… исправлСния, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ indexOf Π²Π΅Ρ€Π΅Π½, Π½ΠΎ Π΅Π³ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ:

Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ true , Ссли искомый класс являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΈΠΌΠ΅Π½ΠΈ класса.

JQuery ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΉ (Ссли Π½Π΅ Ρ‚ΠΎΡ‚ ΠΆΠ΅) ΠΌΠ΅Ρ‚ΠΎΠ΄.

ΠŸΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ:

Π’Π°ΠΊ ΠΊΠ°ΠΊ это Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ вмСстС с ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠΌ switch, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ эффСкта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого ΠΊΠΎΠ΄Π°:

Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠ΅Π½Π΅Π΅ ΠΈΠ·Π±Ρ‹Ρ‚ΠΎΡ‡Π½ΠΎ;)

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ эту ссылку Codepen для Π±ΠΎΠ»Π΅Π΅ быстрого ΠΈ простого способа ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ элСмСнта, Ссли Ρƒ Π½Π΅Π³ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ класс, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΉ Π²Π°Π½ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ JavaScript

Если элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ имя класса, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ быстро ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Π΅Π³ΠΎ, ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ класса. Π”Ρ€ΡƒΠ³ΠΈΠ΅ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹ Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ Π½Π°Π΄Π΅ΠΆΠ½Ρ‹, Π½ΠΎ это, бСзусловно, ΠΈΠΌΠ΅Π΅Ρ‚ свои Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ использования.

Π­Ρ‚ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π½Π΅ Ρ‚Π°ΠΊ, Π½ΠΎ Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ событиС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ Π±Π΅Π· классов:

Π’Ρ‹ моТСшь ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ

.replace(/[0-9]/g, Β») удаляСт Ρ†ΠΈΡ„Ρ€Ρ‹ ΠΈΠ· id .

Π­Ρ‚ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ странно, Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ для Π΄Π»ΠΈΠ½Π½Ρ‹Ρ… ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»Π΅ΠΉ Π±Π΅Π· Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈΠ»ΠΈ ΠΏΠ΅Ρ‚Π΅Π»ΡŒ

Element.classList

Бвойство classList Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ псСвдомассив DOMTokenList , содСрТащий всС классы элСмСнта.

Π£ classList Π΅ΡΡ‚ΡŒ примитивная Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π° β€” свойство className, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ содСрТит Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° class элСмСнта.

Бинтаксис

  • Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ β€” псСвдомассив DOMTokenList , содСрТащий всС классы ΡƒΠ·Π»Π° elem

ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹

ClassList являСтся Π³Π΅Ρ‚Ρ‚Π΅Ρ€ΠΎΠΌ. Π’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌΡ‹ΠΉ ΠΈΠΌ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΈΠΌΠ΅Π΅Ρ‚ нСсколько ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ²:

add( String [,String] ) ДобавляСт элСмСнту ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ классы remove( String [,String] ) УдаляСт Ρƒ элСмСнта ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ классы item ( Number )
Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π΅Π½ Π²Ρ‹Π·ΠΎΠ²Ρƒ сlassList[Number] toggle ( String [, Boolean])
Если класс Ρƒ элСмСнта отсутствуСт β€” добавляСт, ΠΈΠ½Π°Ρ‡Π΅ β€” ΡƒΠ±ΠΈΡ€Π°Π΅Ρ‚. Когда Π²Ρ‚ΠΎΡ€Ρ‹ΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ ΠΏΠ΅Ρ€Π΅Π΄Π°Π½ΠΎ false β€” удаляСт ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ класс, Π° Ссли true β€” добавляСт. Если Π²Ρ‚ΠΎΡ€Ρ‹ΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ ΠΏΠ΅Ρ€Π΅Π΄Π°Π½ undefined ΠΈΠ»ΠΈ пСрСмСнная с typeof == β€˜undefined’, ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΌ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° ΠΏΡ€ΠΈ Π²Ρ‹Π·ΠΎΠ²Π΅ toggle. contains ( String )
ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡΠ΅Ρ‚, Π΅ΡΡ‚ΡŒ Π»ΠΈ Π΄Π°Π½Π½Ρ‹ΠΉ класс Ρƒ элСмСнта (Π²Π΅Ρ€Π½Ρ‘Ρ‚ true ΠΈΠ»ΠΈ false)

И, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, Ρƒ ClassList Π΅ΡΡ‚ΡŒ Π·Π°Π²Π΅Ρ‚Π½ΠΎΠ΅ свойство length, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ количСство классов Ρƒ элСмСнта.

Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ классами ΠΈ стилями элСмСнтов Π² JavaScript

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с классами ΠΈ стилями элСмСнта. Познакомимся со свойствами classList ΠΈ style, ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ ΠΈΡ… использования для управлСния соотвСтствСнно классами ΠΈ стилями элСмСнтов Π½Π° страницС.

Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ классом (классами) элСмСнта

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ способ взаимодСйствия с классами элСмСнтов сводится ΠΊ использованию DOM-свойства className . Π”Π°Π½Π½ΠΎΠ΅ свойство являСтся ΠΎΡ‚Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° class Π² DOM. DOM-свойство className Π½Π΅ Π±Ρ‹Π»ΠΎ Π½Π°Π·Π²Π°Π½ΠΎ class ΠΈΠ·-Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π½ΡŒΡˆΠ΅ Π² JavaScript Π·Π°Ρ€Π΅Π·Π΅Ρ€Π²ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ слова нСльзя Π±Ρ‹Π»ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² качСствС названия свойств ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ². Если Π²Ρ‹ Π½Π΅ Π·Π½Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ DOM-свойства ΠΈ Ρ‡Π΅ΠΌ ΠΎΠ½ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ ΠΎΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², Ρ‚ΠΎ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΏΡ€ΠΎ это ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΠΌ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΈ Π½Π°Π΄ классом элСмСнта ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ DOM-свойство className :

Π’Ρ‚ΠΎΡ€ΠΎΠΉ способ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΈ, связанныС с классом элСмСнта – это ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ для управлСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΠΌ дСйствия ΠΊΠ°ΠΊ Π²Ρ‹ΡˆΠ΅ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅, Π½ΠΎ с использованиСм ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² для управлСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ:

DOM-свойство className ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ class всСгда ΡΠΈΠ½Ρ…Ρ€ΠΎΠ½ΠΈΠ·ΡƒΡŽΡ‚ΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ собой, это Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ мСняСтся ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.

Но Ρƒ элСмСнта ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ ΠΎΠ΄ΠΈΠ½ класс, Π° нСсколько. Π’ этом случаС Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π½ΠΈΠΌΠΈ ΠΊΠ°ΠΊ со строкой Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎ.

НапримСр, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Ρ‚ΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠ³ΠΎ класса Ρƒ элСмСнта, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π²Ρ‹ΡˆΠ΅ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½Π½Ρ‹Π΅ способы ΡƒΠΆΠ΅ нСльзя ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊ просто. Π­Ρ‚ΠΎ ΠΏΠΎΡ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ написаниС ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΠΌ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ Ρƒ элСмСнта класса content__show :

Но ΠΊΡ€ΠΎΠΌΠ΅ этой ситуации, Π²ΡΡ‚Ρ€Π΅Ρ‡Π°ΡŽΡ‚ΡΡ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅. НапримСр, ΠΊΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΎΠ΄ΠΈΠ½ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹ΠΉ класс ΠΊ элСмСнту, ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π΅Π³ΠΎ. Π§Ρ‚ΠΎΠ±Ρ‹ эти дСйствия ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ просто Ρƒ элСмСнта Π΅ΡΡ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ΅ для этих случаСв DOM-свойство classList .

Бвойство classList

Бвойство classList прСдставляСт собой ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ (DOMTokenList), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ содСрТит ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ для выполнСния Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΉ Π½Π°Π΄ классами элСмСнта.

  • .add( className1[,className2. ] ) β€” добавляСт ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ нСсколько ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Ρ… классов ΠΊ элСмСнту. Если Ρƒ элСмСнта ΡƒΠΆΠ΅ Π΅ΡΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹ΠΉ класс, Ρ‚ΠΎ ΠΎΠ½ ΠΊ Π½Π΅ΠΌΡƒ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚.
  • .remove( className1[,className2. ] ) β€” удаляСт ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ нСсколько ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Ρ… классов Ρƒ элСмСнта. Если Ρƒ элСмСнта Π½Π΅Ρ‚ класса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ, Ρ‚ΠΎ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… дСйствий ΠΏΡ€ΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΎ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚.
  • .contains( className ) – провСряСт Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ класса Ρƒ элСмСнта; Π² качСствС ΠΎΡ‚Π²Π΅Ρ‚Π° Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ true ΠΈΠ»ΠΈ false .
  • .toggle( className [,flag] ) β€” ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ имя класса Ρƒ элСмСнта, Ρ‚.Π΅. Ссли Ρƒ элСмСнта Π΅ΡΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹ΠΉ класс, Ρ‚ΠΎ ΡƒΠ±ΠΈΡ€Π°Π΅Ρ‚ Π΅Π³ΠΎ; Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС добавляСт. Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ( flag ) Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ undefined . Если Π΅ΠΌΡƒ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ true ΠΈΠ»ΠΈ false , Ρ‚ΠΎ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΌΠ΅Ρ‚ΠΎΠ΄ add ΠΈΠ»ΠΈ remove , Ρ‚.Π΅. Π»ΠΈΠ±ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ класс ΠΊ элСмСнту, Π»ΠΈΠ±ΠΎ ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ Π΅Π³ΠΎ Ρƒ Π½Π΅Π³ΠΎ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ дСйствия, связанныС с классами элСмСнта с использованиСм ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² classList :

ΠžΠ±ΡŠΠ΅ΠΊΡ‚ classList являСтся псСвдомассивом, Ρ‚. Π΅. Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π±Ρ€Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ массив.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΏΠ΅Ρ€Π΅Π±Π΅Ρ€Ρ‘ΠΌ всС классы classList :

Бвойство classList поддСрТиваСтся всСми соврСмСнными Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ. Если Π½ΡƒΠΆΠ½Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° совсСм старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Internet Explorer 8, 9), Ρ‚ΠΎ Π² этом случаС ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊΠΈΠΌ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΏΠΎΠ»ΠΈΡ„ΠΈΠ»Π»ΠΎΠΌ.

Π‘Ρ‚ΠΈΠ»ΠΈ элСмСнта

Π’ DOM Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта Π΅ΡΡ‚ΡŒ свойство style , с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π΅Π³ΠΎ стилями. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΠΎΠ³ΠΎ свойства β€” это ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ доступСн Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для чтСния. Установка стилСй элСмСнту Π² этом случаС осущСствляСтся посрСдством добавлСния ΠΊ Π½Π΅ΠΌΡƒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… свойств.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΊ элСмСнту Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ стили Ρ‡Π΅Ρ€Π΅Π· DOM-свойство style :

ИмСна свойств ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° style ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‚ с названиями CSS-свойств. Π˜ΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π΅ CSS-свойства, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ дСфис. НапримСр, background-color . Π’ этом случаС дСфис ΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ Π·Π° Π½ΠΈΠΌ Π±ΡƒΠΊΠ²Π° замСняСтся Π½Π° ΠΏΡ€ΠΎΠΏΠΈΡΠ½ΡƒΡŽ. НапримСр, CSS-свойство background-color для ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° style Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ backgroundColor . А, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, CSS-свойство с Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½Ρ‹ΠΌ прСфиксом -webkit-border-radius β€” ΠΊΠ°ΠΊ WebkitBorderRadius .

Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ стилСй

НапримСр, установим body Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°:

Если Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π½Π½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ, Ρ‚ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ это Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ просто ΠΏΡ€ΠΈΡΠ²ΠΎΠΈΡ‚ΡŒ Π΅ΠΌΡƒ ΠΏΡƒΡΡ‚ΡƒΡŽ строку:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ использования DOM-свойства style для установки стилСй элСмСнтам.

Бвойство cssText

ΠšΡ€ΠΎΠΌΠ΅ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ установлСния стилСй элСмСнту ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈΡ… сразу с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ свойства style.cssText . ΠžΡΡƒΡ‰Π΅ΡΡ‚Π²Π»ΡΠ΅Ρ‚ΡΡ это посрСдством присваивания этому свойству строки, состоящСй ΠΈΠ· Π½Π°Π±ΠΎΡ€Π° стилСй, Ρ€Π°Π·Π΄Π΅Π»Ρ‘Π½Π½Ρ‹Ρ… ΠΌΠ΅ΠΆΠ΄Ρƒ собой с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚ΠΎΡ‡ΠΊΠΈ с запятой. Π’.Π΅. выполняСтся это Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ Ρ‚ΠΎΠΌΡƒ, ΠΊΠ°ΠΊ ΠΌΡ‹ устанавливаСм стили Π² HTML-Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ style .

ΠŸΡ€ΠΈΠΌΠ΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ установим стили Β«font-size:40px; color:blue;Β» элСмСнтам с классом intro :

ΠŸΡ€ΠΈ установкС стилСй с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства style.cssText Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ остороТным. Π­Ρ‚ΠΈ связано с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ установкС это свойство удаляСт всС стили, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΅ΡΡ‚ΡŒ Ρƒ элСмСнта. Π’.Π΅. Ρ‚Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ установили Π΅ΠΌΡƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° style ΠΈ Π² ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌ Π΅ΠΌΡƒ DOM-свойствС.

Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΡŽ, Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΡƒΡŽ Ρ‚ΠΎΠΉ ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ выполняСт свойство style.cssText , ΠΌΠΎΠΆΠ½ΠΎ Π΅Ρ‰Ρ‘ Ρ‡Π΅Ρ€Π΅Π· ΠΌΠ΅Ρ‚ΠΎΠ΄ setAttribute .

Задания

1. ΠΠ°ΠΏΠΈΡΠ°Ρ‚ΡŒ скрипт, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ classList , для установлСния элСмСнту с классом text Ρ‚Ρ€Π΅Ρ… классов: size-40 , color-red ΠΈ bg-yellow :

2. ΠΠ°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄ для установлСния стиля Β«width: 180px; height: 180px;Β» всСм элСмСнтам Π½Π° страницС с классом, Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠΌΡΡ со слов block- .

Как ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ класса Ρƒ элСмСнта Π² javascript

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ, содСрТит Π»ΠΈ элСмСнт класс Π² JavaScript?

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ простой JavaScript (Π½Π΅ jQuery), Π΅ΡΡ‚ΡŒ Π»ΠΈ способ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ, содСрТит Π»ΠΈ элСмСнт класс?

Π’ настоящСС врСмя я дСлаю это:

ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ссли я измСню HTML Π½Π° этот .

. Ρ‚ΠΎΡ‡Π½ΠΎΠ³ΠΎ соотвСтствия большС Π½Π΅Ρ‚, поэтому я ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽ Π²Ρ‹Π²ΠΎΠ΄ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π½ΠΈΡ‡Π΅Π³ΠΎ ( «» ). Но я всС Π΅Ρ‰Π΅ Ρ…ΠΎΡ‡Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ…ΠΎΠ΄Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ Π±Ρ‹Π»ΠΈ I have class1 , ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ <div> ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ содСрТит класс . class1 .

22 ΠΎΡ‚Π²Π΅Ρ‚Π°

Π­Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²ΠΎ всСх Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, ΠΈ Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ»ΠΈΡ„ΠΈΠ»Ρ‹ для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ².

Π’ качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ , Ссли Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ со старыми Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ ΠΈ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΠΈΡ„ΠΈΠ»Π»Ρ‹ для ΠΈΡ… исправлСния, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ indexOf Π²Π΅Ρ€Π΅Π½, Π½ΠΎ Π΅Π³ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ:

Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ true , Ссли искомый класс являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΈΠΌΠ΅Π½ΠΈ класса.

JQuery ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΉ (Ссли Π½Π΅ Ρ‚ΠΎΡ‚ ΠΆΠ΅) ΠΌΠ΅Ρ‚ΠΎΠ΄.

ΠŸΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ:

Π’Π°ΠΊ ΠΊΠ°ΠΊ это Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ вмСстС с ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠΌ switch, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ эффСкта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого ΠΊΠΎΠ΄Π°:

Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠ΅Π½Π΅Π΅ ΠΈΠ·Π±Ρ‹Ρ‚ΠΎΡ‡Π½ΠΎ;)

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ эту ссылку Codepen для Π±ΠΎΠ»Π΅Π΅ быстрого ΠΈ простого способа ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ элСмСнта, Ссли Ρƒ Π½Π΅Π³ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ класс, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΉ Π²Π°Π½ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ JavaScript

Если элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ имя класса, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ быстро ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Π΅Π³ΠΎ, ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ класса. Π”Ρ€ΡƒΠ³ΠΈΠ΅ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹ Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ Π½Π°Π΄Π΅ΠΆΠ½Ρ‹, Π½ΠΎ это, бСзусловно, ΠΈΠΌΠ΅Π΅Ρ‚ свои Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ использования.

Π­Ρ‚ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π½Π΅ Ρ‚Π°ΠΊ, Π½ΠΎ Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ событиС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ Π±Π΅Π· классов:

Π’Ρ‹ моТСшь ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ

.replace(/[0-9]/g, Β») удаляСт Ρ†ΠΈΡ„Ρ€Ρ‹ ΠΈΠ· id .

Π­Ρ‚ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ странно, Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ для Π΄Π»ΠΈΠ½Π½Ρ‹Ρ… ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»Π΅ΠΉ Π±Π΅Π· Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈΠ»ΠΈ ΠΏΠ΅Ρ‚Π΅Π»ΡŒ

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡΠ΅ΠΌ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ класса Ρƒ элСмСнта Π½Π° jQuery/JavaScript

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Π°ΠΌ нСсколько способов, способных ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΡƒ Π½Π° Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ класса Π² Π½Π΅ΠΊΠΎΠΌ элСмСнтС. Π‘Π°ΠΌΠΈΡ… ΠΏΠΎ сСбС классов, ΠΊΠ°ΠΊ Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, Ρƒ элСмСнта ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ нСсколько, ΠΈ всС ΠΎΠ½ΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π».

Наша ΠΆΠ΅ Π·Π°Π΄Π°Ρ‡Π° – ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ, присутствуСт Π»ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ класс (ΠΈΠ»ΠΈ нСсколько классов) Ρƒ элСмСнта ΠΈΠ»ΠΈ Π½Π΅Ρ‚, ΠΈ дальшС Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π½ΡƒΠΆΠ½ΠΎΠ΅ Π½Π°ΠΌ дСйствиС.

ВсС описанныС способы ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° конструкции:

А Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅.

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡΠ΅ΠΌ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ класса Ρƒ элСмСнта Π½Π° jQuery

Π’ jQuery ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° наличия класса осущСствляСтся посрСдством ΠΌΠ΅Ρ‚ΠΎΠ΄Π° hasClass.

Для отрицания (Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ для ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ отсутствия класса) Π²Ρ‹ добавляСтС Π·Π½Π°ΠΊ восклицания:

Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС дСйствиС Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΎ, Ссли ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ класс отсутствуСт.

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡΠ΅ΠΌ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ класса Ρƒ элСмСнта Π½Π° JavaScript

Π’ JavaScript ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‡ΡƒΡ‚ΡŒ большС, Π½ΠΎ ΠΏΠΎ конструкции Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π΅Π½ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρƒ с jQuery:

javaScript classList API &#8211; ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ способ добавлСния, удалСния, ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ классов элСмСнта Π² html5

НавСрноС, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ, ΠΊΡ‚ΠΎ Ρ…ΠΎΡ‚ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π» с JavaScript, Π΄ΡƒΠΌΠ°Π» ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ сСбС Тизнь ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с классами DOM элСмСнтов. Ну Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρƒ элСмСнта Π΅ΡΡ‚ΡŒ 2-3 класса ΠΈ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ класса ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· классов. Π‘Ρ‚Π°Ρ€Ρ‹ΠΉ Π΄ΠΎΠ±Ρ€Ρ‹ΠΉ element.className Π½Ρƒ совсСм Π½Π΅ΡƒΠ΄ΠΎΠ±Π΅Π½ для Ρ‚Π°ΠΊΠΈΡ… ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΉ. Π‘Π°ΠΌΠΎΠ΅ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎΠ΅ ΠΈ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π΄ΠΎ сих ΠΏΠΎΡ€ Π±Ρ‹Π»ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΡƒΠΆΠ΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ Ρ‚ΠΈΠΏΠ° jQuery, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π΅ΡΡ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ addClass() , removeClass() , toggleClass() .. Π½Ρƒ ΠΈΠ»ΠΈ изобрСсти вСлосипСд ΠΈ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ свой Π½Π°Π±ΠΎΡ€ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ. Но Π²ΠΎΡ‚, совсСм Π½Π΅Π΄Π°Π²Π½ΠΎ, с Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠ΅ΠΌ HTML5, появился javaScript classList API. Он ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятСн, ΠΎΡ‡Π΅Π½ΡŒ прост, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ быстрСС всСвозмоТных Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΈ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. Π’ΠΎ ΠΎ Ρ‡Π΅ΠΌ Π²Ρ‹ ΠΌΠ΅Ρ‡Ρ‚Π°Π»ΠΈ! API ΡƒΠΆΠ΅ Π΄Π°Π²Π½ΠΎ Ρ€Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²ΠΎ всСх Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΈ Π²ΠΎΡ‚ Π½Π°ΠΊΠΎΠ½Π΅Ρ†-Ρ‚ΠΎ (АлСлуййа!!) поддСрТиваСтся IE10-ΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΠΎ своСму ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ. По ΠΏΠΎΠ²ΠΎΠ΄Ρƒ IE 7-9 смотритС Π² ΠΊΠΎΠ½Ρ†Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ. ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

classList api Π˜Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ Ρƒ нас Π΅ΡΡ‚ΡŒ Π² арсСналС? ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ HTML элСмСнт содСрТит свойство

classList , ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ прСдставляСт ΠΈΠ· сСбя ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, доступный для чтСния.

Как ΡƒΠ·Π½Π°Ρ‚ΡŒ сколько классов Π΅ΡΡ‚ΡŒ Ρƒ элСмСнта?
Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс ΠΊ элСмСнту?
Как ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· классов элСмСнта?
Как ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ, содСрТит Π»ΠΈ элСмСнт ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ класс?
Как ΠΏΡ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ класс (Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ, Ссли Π΅Π³ΠΎ Π½Π΅Ρ‚, ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ, Ссли ΠΎΠ½ Π΅ΡΡ‚ΡŒ)?
Как ΡƒΠ·Π½Π°Ρ‚ΡŒ индСкс ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‰Π΅Π³ΠΎ класса Π² Π½Π°Π±ΠΎΡ€Π΅ классов элСмСнта?

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ·Π½Π°Ρ‚ΡŒ здСсь &#8220;Как ΠΆΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с IE 7-9 ?&#8221; &#8211; спроситС Π’Ρ‹.. НС ΠΏΡ€Π΅Ρ€Π΅ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅, ΡƒΠΌΠ½Ρ‹Π΅ люди ΡƒΠΆΠ΅ Π΄Π°Π²Π½ΠΎ написали Π³Ρ€Π°ΠΌΠΎΡ‚Π½Ρ‹ΠΉ ΠΏΠΎΠ»ΠΈΡ„ΠΈΠ» ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ старым IE, Ссли Π΅ΡΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ с Π½ΠΈΠΌΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.

6 comments on β€œ javaScript classList API &#8211; ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ способ добавлСния, удалСния, ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ классов элСмСнта Π² html5 ”

Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½ΠΎ, Π² jquery ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ это? Надо ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°ΠΊ hasClass ΠΏΠ°ΡˆΠ΅Ρ‚

Π½Π΅ ΡŽΠ·Π°Π΅Ρ‚
Ρƒ Π½ΠΈΡ… всС ΠΏΠΎ старому

ΠœΠΎΠΆΠ΅Ρ‚ Π² Π½ΠΎΠ²Ρ‹Ρ… вСрсиях?

ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ ΠΈΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ класса Π² зависимости ΠΎΡ‚ условия &#8211; Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚

Как ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ всС ΠΈΠΌΠ΅Π½Π° HTML-классов ΠΈΠ· DOM-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°? β€” efim360.ru

Как ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ всС названия классов Π½Π° HTML-страницС?

ΠœΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Π·Π½Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠΌΠ΅Π½Π½ΠΎ названия HTML-Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² class ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Ρ€Π΅Ρ‚ΠΈΡ‚ΡŒ Π² качСствС Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π²ΠΎ всём Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅. Как это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ?

Β 

РСшСниС

[...new Set([...document.querySelectorAll('*')].map(i=>[...i.classList]).flat(Infinity).sort())]

ΠΈΠ»ΠΈ

[...new Set([...document.all].map(i=>[...i.classList]).flat(Infinity).sort())]

Π”Π°Π½Π½ΠΎΠ΅ Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π΅Ρ€Π½Ρ‘Ρ‚ Π½Π°ΠΌ сортированный массив ΠΈΠ· ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… строк, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ значСниями классов всСх элСмСнтов Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅.

Β 

Как это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚?

Π¨Π°Π³ β„– 1

Π‘Π½Π°Ρ‡Π°Π»Π° ΠΌΡ‹ обращаСмся ΠΊ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° (document), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сформировался Π½Π° нашСй Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, послС получСния строки с Π΄Π°Π½Π½Ρ‹ΠΌΠΈ с сСрвСра. Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ синтаксичСски ΠΏΡ€ΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π» строку с HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΎΠΉ ΠΈ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ «ΠžΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎΠΉ МодСли Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°» создал для нас ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ JavaScript-ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…Ρ€Π°Π½ΠΈΡ‚ Π² сСбС всС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ HTML-элСмСнтов.

document

Π£ этого ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π΅ΡΡ‚ΡŒ Ρ†Π΅Π»Ρ‹ΠΉ стандарт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ опрСдСляСт мноТСство ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² ΠΈ свойств для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с этим ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠΌ.

Π‘ΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚ Π³Π»Π°Π²Π½ΠΎΠΉ страницы стандарта DOM ΠΎΡ‚ 19 дСкабря 2021 Π³ΠΎΠ΄Π°:

Π‘ΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚ Π³Π»Π°Π²Π½ΠΎΠΉ страницы стандарта DOM ΠΎΡ‚ 19 дСкабря 2021 Π³ΠΎΠ΄Π°

Β 

Π¨Π°Π³ β„– 2

Π”Π°Π»Π΅Π΅ Π΅ΡΡ‚ΡŒ 2 ΠΏΡƒΡ‚ΠΈ получСния всСх ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² HTML-элСмСнтов:

  1. Из стандарта DOM ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄ querySelectorAll()
  2. Из стандарта HTML ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π£Π‘Π’ΠΠ Π•Π’Π¨Π˜Π™ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ all

Какой ΠΈΠ· Π½ΠΈΡ… Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ — Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ Π²Π°ΠΌ. На 2022 Π³ΠΎΠ΄ ΠΎΠ±Π° Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

Π Π°Π·Π½ΠΈΡ†Π° Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π² ΠΌΠ΅Ρ‚ΠΎΠ΄

querySelectorAll() Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ CSS-сСлСктор, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ обозначаСтся строкой со Π·Π²Ρ‘Π·Π΄ΠΎΡ‡ΠΊΠΎΠΉ — «*»

document.querySelectorAll('*')

ΠΈΠ»ΠΈ

document.all

Π’Ρ‚ΠΎΡ€ΠΎΠ΅ Π²Π°ΠΆΠ½ΠΎΠ΅ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ Π² Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊΠΎΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Π½Π° Π²Ρ‹Ρ…ΠΎΠ΄Π΅.

  • querySelectorAll(‘*‘), Ρ‚ΠΎ возвращаСтся ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ класса NodeList
  • all, Ρ‚ΠΎ возвращаСтся ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ класса HTMLAllCollection

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π²Ρ‹Π·ΠΎΠ²Π° Π½Π° случайном Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅:

ΠΌΠ΅Ρ‚ΠΎΠ΄ querySelectorAll(‘*’) ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ all Π½Π° случайном Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ — JavaScript

Β 

Π¨Π°Π³ β„– 3

Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½Ρ‹Π΅ JavaScript-ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ экзСмпляров класса

Array Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ с NodeList ΠΈ HTMLAllCollection. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π½Π΅ смоТСм «ΠΏΡ€ΠΎΠ±Π΅Π³Π°Ρ‚ΡŒ» ΠΏΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌ HTML-элСмСнтов ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ(ΠΈΠ·Π²Π»Π΅ΠΊΠ°Ρ‚ΡŒ) Π½ΡƒΠΆΠ½Ρ‹Π΅ Π½Π°ΠΌ Π΄Π°Π½Π½Ρ‹Π΅.  Нам Π½ΡƒΠΆΠ½Π° конвСртация Π² массив для получСния ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Π° для манипулирования с ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ HTML-элСмСнтов этого Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

ДСлаСтся это ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ spread () ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Π° ΠΈ Π»ΠΈΡ‚Π΅Ρ€Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ объявлСния массива []:

[...document.querySelectorAll('*')]

ΠΈΠ»ΠΈ

[...document.all]

Π­Ρ‚ΠΈ Π΄Π²Π° выраТСния Π²Π΅Ρ€Π½ΡƒΡ‚ Π½Π°ΠΌ стандартный массив языка JavaScript.

ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π»ΠΈ NodeList ΠΈ HTMLAllCollection Π² Array

Β 

Π¨Π°Π³ β„– 4

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ нас ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ «ΠΏΡ€ΠΎΠ±Π΅Π³Π°Π½ΠΈΡ» ΠΏΠΎ всСм элСмСнтам массива для «Π²Ρ‹Π΄Ρ‘ргивания» Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΈΠ· Π½ΡƒΠΆΠ½Ρ‹Ρ… свойств ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² HTML-элСмСнтов.

Π­Ρ‚ΠΎ ΡƒΠΌΠ΅Π΅Ρ‚ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄ map(). Π’Π°ΠΊ ΠΊΠ°ΠΊ нас ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‚ значСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π»Π΅ΠΆΠ°Ρ‚ Π² классах HTML-элСмСнтов, Ρ‚ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ ΠΊ Ρ‚Π°ΠΊΠΎΠΌΡƒ свойству, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ называСтся classList.

[...document.querySelectorAll('*')].map(i=>i.classList)

ΠΈΠ»ΠΈ

[.
..document.all].map(i=>i.classList)

Π­Ρ‚ΠΎ свойство Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒ Π½Π°ΠΌ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ класса DOMTokenList. По сути это Ρ‚Π΅ ΠΆΠ΅ самыС массивы (смотри шаг β„– 3).

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ класса DOMTokenList всСх HTML-элСмСнтов Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ — JavaScript

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ DOMTokenList Π±ΡƒΠ΄ΡƒΡ‚ пустыми. Π­Ρ‚ΠΎ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ Ρ‚. ΠΊ. Π½Π΅ всС HTML-элСмСнты ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ свои классы.

Β 

Π¨Π°Π³ β„– 5

Нам снова Π½ΡƒΠΆΠ½Π° конвСртация Π² массив ΠΈΠ· ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² DOMTokenList. Π’ΠΎ Π΅ΡΡ‚ΡŒ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠΆΠ΅ сразу Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒ массивы, Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π²Ρ‹Π·ΠΎΠ²Π° ΠΌΠ΅Ρ‚ΠΎΠ΄Π°

map().

[...document.querySelectorAll('*')].map(i=>[...i.classList])

ΠΈΠ»ΠΈ

[...document.all].map(i=>[...i.classList])
ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ класса Array всСх HTML-элСмСнтов Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ — JavaScript

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ нас Π΅ΡΡ‚ΡŒ самая удобная структура — массив состоящий Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ· массивов.

Β 

Π¨Π°Π³ β„– 6

Π’Ρ‹ΠΏΠ°ΠΊΠΎΠ²Ρ‹Π²Π°Π½ΠΈΠ΅ содСрТимого всСх Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… массивов Π½Π° ΠΎΠ΄ΠΈΠ½ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ массива. Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ эту Π·Π°Π΄Π°Ρ‡Ρƒ способСн ΠΌΠ΅Ρ‚ΠΎΠ΄ flat(), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Π² сСбя число ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ бСсконСчности — Infinity. Π‘Π΅ΡΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΡΡ‚ΡŒ Π΄Π°Ρ‘Ρ‚ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡŽ максимального погруТСния Π² Π³Π»ΡƒΠ±ΠΈΠ½Ρƒ массива. Π”ΠΎ самого Π΄Π½Π°, Ссли это потрСбуСтся.

[...document.querySelectorAll('*')].map(i=>[...i.classList]).flat(Infinity)

ΠΈΠ»ΠΈ

[...document.all].map(i=>[...i.classList]).flat(Infinity)

ΠœΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ всС названия классов Π² строковом Π²ΠΈΠ΄Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°ΡŽΡ‚ΡΡ Π² Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΌ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅. ΠŸΡ€ΠΈΡ‡Ρ‘ΠΌ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ Ρ‚.ΠΊ. Ρ€Π°Π·Π½Ρ‹Π΅ HTML-элСмСнты ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ значСния классов.

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ всС строковыС значСния ΠΈΠΌΡ‘Π½ классов, Π²ΡΡ‚Ρ€Π΅Ρ‡Π°ΡŽΡ‰ΠΈΡ…ΡΡ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ Π² Π΄Ρ€Π΅Π²ΠΎΠ²ΠΈΠ΄Π½ΠΎΠΌ порядкС — JavaScript

Β 

Β 

Π¨Π°Π³ β„– 7

Π‘ΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²ΠΊΠ° Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ² для ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ восприятия ΠΈΡ‚ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ массива (ΠΈ Π΅Π³ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ³ΠΎ Π²Ρ‹Π²ΠΎΠ΄Π° Π² графичСскоС прСдставлСниС).

[...document.querySelectorAll('*')].map(i=>[...i.classList]).flat(Infinity).sort()

ΠΈΠ»ΠΈ

[...document.all].map(i=>[...i.classList]).flat(Infinity).sort()
ΠžΡ‚ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π»ΠΈ всС названия классов ΠΏΠΎ Π»ΠΎΠ³ΠΈΠΊΠ΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° sort() — JavaScript

Β 

Π¨Π°Π³ β„– 8

На этом шагС Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠ·Π±Π°Π²ΠΈΡ‚ΡŒΡΡ ΠΎΡ‚ Π΄ΡƒΠ±Π»Π΅ΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ строковыС значСния ΠΈΠ· массива JavaScript. Π’ этом Π½Π°ΠΌ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ конструктор класса Set, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ стандартно Π·Π°Π»ΠΎΠΆΠ΅Π½ Π² Π“Π›ΠžΠ‘ΠΠ›Π¬ΠΠžΠœ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π΅ языка.

new Set([...document.querySelectorAll('*')].map(i=>[...i.classList]).flat(Infinity).sort())

ΠΈΠ»ΠΈ

new Set([...document.all].map(i=>[...i.classList]).flat(Infinity).sort())

Нам вСрнётся ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ — экзСмпляр класса Set.

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ экзСмпляр класса Set (ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€) Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΈΠΌΡ‘Π½ классов Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° — JavaScript

Β 

Π¨Π°Π³ β„– 9

Π€ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ шагом Π±ΡƒΠ΄Π΅Ρ‚ конвСртация ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Set Π² Array.

[...new Set([...document.querySelectorAll('*')].map(i=>[...i.classList]).flat(Infinity).sort())] ΠΈΠ»ΠΈ [...new Set([...document.all].map(i=>[...i.classList]).flat(Infinity).sort())]
ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ массив ΠΈΠ· ΠΈΠΌΡ‘Π½ классов HTML-элСмСнтов — JavaScript

Β 

Π˜Ρ‚ΠΎΠ³

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ Π°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ этот массив для Π΄Π°Π»ΡŒΠ½Π΅ΠΉΡˆΠΈΡ… манипуляций с ΠΊΠΎΠ΄ΠΎΠΌ своСй собствСнной ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹.

Β 

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ ссылки

JavaScript | Π•ΡΡ‚ΡŒ Π»ΠΈ HTML-класс Π² DOM-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅?

HTML | Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡ HTMLAllCollection

Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚ HTML — Π Π°Π·Π΄Π΅Π» «2.6.2.1 The HTMLAllCollection interface» — https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#the-htmlallcollection-interface

ПониманиС ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° ΠΈ класса Π² CSS

ΠžΠ±Π·ΠΎΡ€

Π”ΠΎ сих ΠΏΠΎΡ€ Π²Ρ‹ добавляли стили ΠΊ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ элСмСнтам Π½Π° страницС вашСго ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, Π½ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹Π΅ Π²Π°ΠΌΠΈ стили Π·Π°Ρ‚Ρ€ΠΎΠ½ΡƒΠ»ΠΈ всС элСмСнтов ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ°. НапримСр, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΡΡ‚ΠΈΠ»ΡŒ ΠΊ элСмСнту div, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ повлиял Π½Π° всС элСмСнты div Π² Ρ€Π°Π²Π½ΠΎΠΉ стСпСни. Π§Ρ‚ΠΎ, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΈ элСмСнты div ΠΎΠ΄Π½ΠΈΠΌ способом, Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ β€” Π΄Ρ€ΡƒΠ³ΠΈΠΌ? Π’ΠΎΡ‚ Ρ‚ΡƒΡ‚-Ρ‚ΠΎ ΠΈ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ ΠΈ класс. Π’ этом ΡƒΡ€ΠΎΠΊΠ΅ Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° ΠΈ класса для стилизации ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов (ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€) ΠΈΠ»ΠΈ Π³Ρ€ΡƒΠΏΠΏ элСмСнтов (класс).

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ учащСгося

По Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠΈ этого упраТнСния:

  • Π²Ρ‹ смоТСтС ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ID ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² CSS для Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ стиля ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов.
  • Π²Ρ‹ смоТСтС ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ класса ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΠΈΠ·Π°Ρ†ΠΈΡŽ Π³Ρ€ΡƒΠΏΠΏ элСмСнтов.
  • Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ID ΠΈ Class ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ элСмСнтам Π½Π° Π²Π΅Π±-страницС.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€?

Π’ HTML ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ элСмСнту Π½Π° вашСй Π²Π΅Π±-страницС ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ присвоСн ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ id. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ любой тСкст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Π°ΠΌ нравится, Π½ΠΎ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ (эта ΠΌΠ΅Ρ‚ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρƒ ΠΎΠ΄Π½ΠΎΠ³ΠΎ элСмСнта). РСкомСндуСтся Π½Π°Π·Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΊΠΈ, ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ элСмСнта. НапримСр, элСмСнт

<Π΄Π΅Π»>

Π­Ρ‚ΠΎ я!