ΠΠ°ΠΊ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ Π΅ΡΡΡ Π»ΠΈ ΠΊΠ»Π°ΡΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° 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 – ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ, ΡΠ΄Π°Π»Π΅Π½ΠΈΡ, ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΠΊΠ»Π°ΡΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² html5
ΠΠ°Π²Π΅ΡΠ½ΠΎΠ΅, ΠΊΠ°ΠΆΠ΄ΡΠΉ, ΠΊΡΠΎ Ρ ΠΎΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π±ΠΎΡΠ°Π» Ρ JavaScript, Π΄ΡΠΌΠ°Π» ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠΏΡΠΎΡΡΠΈΡΡ ΡΠ΅Π±Π΅ ΠΆΠΈΠ·Π½Ρ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ DOM ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡ Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΅ΡΡΡ 2-3 ΠΊΠ»Π°ΡΡΠ° ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½, ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ Π½Π°Π»ΠΈΡΠΈΠ΅ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΠΊΠ»Π°ΡΡΠ° ΠΈΠ»ΠΈ ΡΠ΄Π°Π»ΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΊΠ»Π°ΡΡΠΎΠ². Π‘ΡΠ°ΡΡΠΉ Π΄ΠΎΠ±ΡΡΠΉ element.className Π½Ρ ΡΠΎΠ²ΡΠ΅ΠΌ Π½Π΅ΡΠ΄ΠΎΠ±Π΅Π½ Π΄Π»Ρ ΡΠ°ΠΊΠΈΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΉ. Π‘Π°ΠΌΠΎΠ΅ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎΠ΅ ΠΈ ΡΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄ΠΎ ΡΠΈΡ ΠΏΠΎΡ Π±ΡΠ»ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠΆΠ΅ Π³ΠΎΡΠΎΠ²ΡΠΌΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°ΠΌΠΈ ΡΠΈΠΏΠ° jQuery, Π² ΠΊΠΎΡΠΎΡΡΡ Π΅ΡΡΡ ΠΌΠ΅ΡΠΎΠ΄Ρ addClass() , removeClass() , toggleClass() .. Π½Ρ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ΅ΡΡΠΈ Π²Π΅Π»ΠΎΡΠΈΠΏΠ΅Π΄ ΠΈ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΡΠ²ΠΎΠΉ Π½Π°Π±ΠΎΡ ΡΡΠ½ΠΊΡΠΈΠΉ. ΠΠΎ Π²ΠΎΡ, ΡΠΎΠ²ΡΠ΅ΠΌ Π½Π΅Π΄Π°Π²Π½ΠΎ, Ρ ΡΠ°Π·Π²ΠΈΡΠΈΠ΅ΠΌ HTML5, ΠΏΠΎΡΠ²ΠΈΠ»ΡΡ javaScript classList API. ΠΠ½ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ½ΡΡΠ΅Π½, ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡ, ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π±ΡΡΡΡΠ΅Π΅ Π²ΡΠ΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΠΈ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. Π’ΠΎ ΠΎ ΡΠ΅ΠΌ Π²Ρ ΠΌΠ΅ΡΡΠ°Π»ΠΈ! API ΡΠΆΠ΅ Π΄Π°Π²Π½ΠΎ ΡΠ±ΠΎΡΠ°Π΅Ρ Π²ΠΎ Π²ΡΠ΅Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΠΈ Π²ΠΎΡ Π½Π°ΠΊΠΎΠ½Π΅Ρ-ΡΠΎ (ΠΠ»Π΅Π»ΡΠΉΠΉΠ°!!) ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ IE10-ΠΌ, ΡΡΠΎ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ. ΠΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρ IE 7-9 ΡΠΌΠΎΡΡΠΈΡΠ΅ Π² ΠΊΠΎΠ½ΡΠ΅ ΡΡΠ°ΡΡΠΈ. ΠΡΠΈΠΌΠ΅Ρ:
classList api ΠΡΠ°ΠΊ, ΡΡΠΎ Ρ Π½Π°Ρ Π΅ΡΡΡ Π² Π°ΡΡΠ΅Π½Π°Π»Π΅? ΠΠ°ΠΆΠ΄ΡΠΉ HTML ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
classList , ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΈΠ· ΡΠ΅Π±Ρ ΠΎΠ±ΡΠ΅ΠΊΡ, Π΄ΠΎΡΡΡΠΏΠ½ΡΠΉ Π΄Π»Ρ ΡΡΠ΅Π½ΠΈΡ.
ΠΠ°ΠΊ ΡΠ·Π½Π°ΡΡ ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΠΎΠ² Π΅ΡΡΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°?
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ?
ΠΠ°ΠΊ ΡΠ΄Π°Π»ΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΊΠ»Π°ΡΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°?
ΠΠ°ΠΊ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΠΊΠ»Π°ΡΡ?
ΠΠ°ΠΊ ΠΏΡΠ΅ΠΊΠ»ΡΡΠΈΡΡ ΠΊΠ»Π°ΡΡ (Π΄ΠΎΠ±Π°Π²ΠΈΡΡ, Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ Π½Π΅Ρ, ΠΈΠ»ΠΈ ΡΠ΄Π°Π»ΠΈΡΡ, Π΅ΡΠ»ΠΈ ΠΎΠ½ Π΅ΡΡΡ)?
ΠΠ°ΠΊ ΡΠ·Π½Π°ΡΡ ΠΈΠ½Π΄Π΅ΠΊΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΠ΅Π³ΠΎ ΠΊΠ»Π°ΡΡΠ° Π² Π½Π°Π±ΠΎΡΠ΅ ΠΊΠ»Π°ΡΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°?
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ·Π½Π°ΡΡ Π·Π΄Π΅ΡΡ “ΠΠ°ΠΊ ΠΆΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ IE 7-9 ?” – ΡΠΏΡΠΎΡΠΈΡΠ΅ ΠΡ.. ΠΠ΅ ΠΏΡΠ΅ΡΠ΅ΠΆΠΈΠ²Π°ΠΉΡΠ΅, ΡΠΌΠ½ΡΠ΅ Π»ΡΠ΄ΠΈ ΡΠΆΠ΅ Π΄Π°Π²Π½ΠΎ Π½Π°ΠΏΠΈΡΠ°Π»ΠΈ Π³ΡΠ°ΠΌΠΎΡΠ½ΡΠΉ ΠΏΠΎΠ»ΠΈΡΠΈΠ» ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΡΡΠ°ΡΡΠΌ IE, Π΅ΡΠ»ΠΈ Π΅ΡΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ Ρ Π½ΠΈΠΌΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ.
6 comments on β javaScript classList API – ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ, ΡΠ΄Π°Π»Π΅Π½ΠΈΡ, ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΠΊΠ»Π°ΡΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² html5 β
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, Π² jquery ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΡΠΎ? ΠΠ°Π΄ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠ°ΠΊ hasClass ΠΏΠ°ΡΠ΅Ρ
Π½Π΅ ΡΠ·Π°Π΅Ρ
Ρ Π½ΠΈΡ
Π²ΡΠ΅ ΠΏΠΎ ΡΡΠ°ΡΠΎΠΌΡ
ΠΠΎΠΆΠ΅Ρ Π² Π½ΠΎΠ²ΡΡ Π²Π΅ΡΡΠΈΡΡ ?
ΠΎΡΡΠ°Π»ΠΎΡΡ ΠΈΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠ° Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΡΠ»ΠΎΠ²ΠΈΡ – Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²ΡΠΎΡΠΎΠΉ Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΉ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ
ΠΠ°ΠΊ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π²ΡΠ΅ ΠΈΠΌΠ΅Π½Π° 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-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²:
- ΠΠ· ΡΡΠ°Π½Π΄Π°ΡΡΠ° DOM ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅ΡΠΎΠ΄ querySelectorAll()
- ΠΠ· ΡΡΠ°Π½Π΄Π°ΡΡΠ° HTML ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π£Π‘Π’ΠΠ ΠΠΠ¨ΠΠ Π°ΡΡΠΈΠ±ΡΡ all
ΠΠ°ΠΊΠΎΠΉ ΠΈΠ· Π½ΠΈΡ Π²ΡΠ±ΡΠ°ΡΡ — ΡΠ΅ΡΠ°ΡΡ Π²Π°ΠΌ. ΠΠ° 2022 Π³ΠΎΠ΄ ΠΎΠ±Π° ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
Π Π°Π·Π½ΠΈΡΠ° Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π² ΠΌΠ΅ΡΠΎΠ΄
document.querySelectorAll('*') ΠΈΠ»ΠΈ document.all
ΠΡΠΎΡΠΎΠ΅ Π²Π°ΠΆΠ½ΠΎΠ΅ ΠΎΡΠ»ΠΈΡΠΈΠ΅ Π² ΡΠΎΠΌ, ΠΊΠ°ΠΊΠΎΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ ΠΌΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ Π½Π° Π²ΡΡ ΠΎΠ΄Π΅.
- querySelectorAll(‘*‘), ΡΠΎ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΡΡΡ ΠΎΠ±ΡΠ΅ΠΊΡ ΠΊΠ»Π°ΡΡΠ° NodeList
- all, ΡΠΎ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΡΡΡ ΠΎΠ±ΡΠ΅ΠΊΡ ΠΊΠ»Π°ΡΡΠ° HTMLAllCollection
ΠΡΠΈΠΌΠ΅Ρ Π²ΡΠ·ΠΎΠ²Π° Π½Π° ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅:
ΠΌΠ΅ΡΠΎΠ΄ querySelectorAll(‘*’) ΠΈ Π°ΡΡΠΈΠ±ΡΡ all Π½Π° ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ — JavaScriptΒ
Π¨Π°Π³ β 3
Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ JavaScript-ΠΌΠ΅ΡΠΎΠ΄Ρ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠΎΠ² ΠΊΠ»Π°ΡΡΠ°
ΠΠ΅Π»Π°Π΅ΡΡΡ ΡΡΠΎ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ 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. Π’ΠΎ Π΅ΡΡΡ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΆΠ΅ ΡΡΠ°Π·Ρ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡ ΠΌΠ°ΡΡΠΈΠ²Ρ, Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΡΠ΅ΡΠ°ΡΠΈΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ·ΠΎΠ²Π° ΠΌΠ΅ΡΠΎΠ΄Π°
[...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.
ΠΠΎΠ»ΡΡΠΈΠ»ΠΈ ΠΌΠ°ΡΡΠΈΠ² ΠΈΠ· ΠΈΠΌΡΠ½ ΠΊΠ»Π°ΡΡΠΎΠ² HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² — JavaScript[...new Set([...document.querySelectorAll('*')].map(i=>[...i.classList]).flat(Infinity).sort())] ΠΈΠ»ΠΈ [...new Set([...document.all].map(i=>[...i.classList]).flat(Infinity).sort())]
Β
ΠΡΠΎΠ³
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π°Π½Π°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΠΌΠ°ΡΡΠΈΠ² Π΄Π»Ρ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠΈΡ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΉ Ρ ΠΊΠΎΠ΄ΠΎΠΌ ΡΠ²ΠΎΠ΅ΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ.
Β
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ
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. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Π°ΠΌ Π½ΡΠ°Π²ΠΈΡΡΡ, Π½ΠΎ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ (ΡΡΠ° ΠΌΠ΅ΡΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°). Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ Π½Π°Π·Π½Π°ΡΠ°ΡΡ ΠΌΠ΅ΡΠΊΠΈ, ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ
- , ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΈΠ»ΠΈ
- ΠΡ Ρ ΠΎΡΠΈΡΠ΅ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ½Π°ΡΠ΅, ΡΠ΅ΠΌ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠΈΠΏΠ°.
- ΠΡ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΡΡΠ»Π°ΡΡΡΡ Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅. Π€Π°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ, Π²Ρ ΡΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² div Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ·Π΄Π°Π²Π°Π»ΠΈ ΡΡΡΠ»ΠΊΡ Β«ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡΒ» Π² ΡΡΠΎΠΊΠ΅ Β«ΠΡΠΎΠ±ΡΠ΅ ΡΠΈΠΏΡ ΡΡΡΠ»ΠΎΠΊΒ».
- ΠΡ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΠΌΠ΅ΡΡ ΠΏΡΡΠΌΠΎΠΉ Π΄ΠΎΡΡΡΠΏ ΠΊ ΡΡΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Javascript. ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎΠ± ΡΡΠΎΠΌ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅ Π² ΠΌΠΎΠ΄ΡΠ»Π΅ ΠΏΠΎ Javascript.
ΠΡ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ id ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML, ΠΊΠΎΠ³Π΄Π°:
Π ΡΡΠΎΠΌ Π±Π»ΠΎΠΊΠ΅ Π½Π°Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠ΅ΡΠ²Π°Ρ ΠΏΡΠΈΡΠΈΠ½Π° Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ°. ΠΡ Ρ ΠΎΡΠΈΠΌ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄ΠΎΠΏΡΡΡΠΈΠΌ, Ρ Π²Π°Ρ Π΅ΡΡΡ Π°Π±Π·Π°Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ»ΡΠΆΠΈΡ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ΠΌ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΡ Π½Π΅ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π²ΡΠ³Π»ΡΠ΄Π΅Π» ΠΊΠ°ΠΊ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π°Π±Π·Π°ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠ°ΠΆΠ½ΠΎ! Π‘Π΅Π³ΠΎΠ΄Π½Ρ Π²ΡΠ΅ Π·Π°Π½ΡΡΠΈΡ ΠΎΡΠΌΠ΅Π½Π΅Π½Ρ.
Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΈΠ»Ρ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ, Π²Ρ ΡΡΠ°Π²ΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅Π΄ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ ΡΠΈΡΡΡ 9.0039 # ΡΠΈΠΌΠ²ΠΎΠ» Π² Π²Π°ΡΠ΅ΠΌ CSS. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΠΎΡ ΠΊΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π½Π°Ρ Π°Π±Π·Π°Ρ Ρ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΡΡ Π² Π±ΠΎΠ»ΡΡΠΎΠΌ ΠΆΠ΅Π»ΡΠΎΠΌ ΠΏΠΎΠ»Π΅ Ρ ΡΠ΅ΡΠ½ΠΎΠΉ ΡΠ°ΠΌΠΊΠΎΠΉ ΠΈ Π±ΠΎΠ»ΡΡΠΈΠΌ ΡΠ΅ΡΠ½ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ:
ΠΏ # ΠΎΠΏΠΎΠ²Π΅ΡΠ΅Π½ΠΈΠ΅ { ΡΠ΅ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ; Π²Π΅Ρ ΡΡΠΈΡΡΠ°: ΠΏΠΎΠ»ΡΠΆΠΈΡΠ½ΡΠΉ; ΡΠΎΠ½: #FFFF66; /* ΠΆΠ΅Π»ΡΡΠΉ */ Π³ΡΠ°Π½ΠΈΡΠ°: 2px ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠ½ΡΠΉ; Π½Π°Π±ΠΈΠ²ΠΊΠ°: 1em; }
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠΈΠΏ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² CSS Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π΅ΡΠ»ΠΈ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΅ΡΡΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Β«p#alertΒ» Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΡΠΈΠ»Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ Π°Π±Π·Π°ΡΡ Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ Β«alertΒ». ΠΠ΄Π½Π°ΠΊΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π½Π΅Ρ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° β Π°Π±Π·Π°ΡΠ° ΠΈΠ»ΠΈ ΡΠ΅Π³ΠΎ-ΡΠΎ Π΅ΡΠ΅ β Ρ ΡΠ°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ, ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΡΠ°ΠΊ ΠΆΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Β«#alertΒ» Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° Π±Π΅Π· Β«pΒ», Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:0007
#ΡΡΠ΅Π²ΠΎΠ³Π° { ΡΠ΅ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ; Π²Π΅Ρ ΡΡΠΈΡΡΠ°: ΠΏΠΎΠ»ΡΠΆΠΈΡΠ½ΡΠΉ; ΡΠΎΠ½: #FFFF66; /* ΠΆΠ΅Π»ΡΡΠΉ */ Π³ΡΠ°Π½ΠΈΡΠ°: 2px ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠ½ΡΠΉ; Π½Π°Π±ΠΈΠ²ΠΊΠ°: 1em; }
ΠΠ±ΡΡΠ½ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠΌΠ΅Π»ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ. ΠΠ½ΠΎΠ³Π΄Π° Π²Ρ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ ΡΠ·Π½Π°ΡΡ ΡΡΠΎ, ΠΏΡΠΎΡΡΠΎ Π²Π·Π³Π»ΡΠ½ΡΠ² Π½Π° ΡΠ°ΠΉΠ» CSS, Π½Π΅ ΠΎΠ±ΡΠ°ΡΠ°ΡΡΡ ΠΊ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌΡ ΡΠ°ΠΉΠ»Ρ HTML.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΊΠ»Π°ΡΡ?
ΠΠ½ΠΎΠ³Π΄Π° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π³ΡΡΠΏΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ ΡΠ°Π·Π²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΠ±Π·ΠΎΡΠΎΠ² ΡΠΈΠ»ΡΠΌΠΎΠ² Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π΄ΡΡΠ³ΠΎΠΌΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΡ. ΠΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΎΠ±Π·ΠΎΡΠ° (Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΠ»ΡΠΌΠ° ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π°Π±Π·Π°ΡΠ΅Π²) Π·Π°ΠΊΠ»ΡΡΠ΅Π½ΠΎ Π²
<Π΄Π΅Π»>ΠΡΠ΅ΡΡΠ½ΡΠΉ ΠΎΡΠ΅Ρ
ΠΡΠ΅ΡΡΠ½ΡΠΉ ΠΎΡΠ΅Ρ (1972)Β β Π²Π΅Π»ΠΈΡΠ°ΠΉΡΠΈΠΉ ΡΠΈΠ»ΡΠΌ Π²ΡΠ΅Ρ Π²ΡΠ΅ΠΌΠ΅Π½. ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΡΠΈΡΠ»Π΅Π½Π½ΡΠΌ ΠΎΠΏΡΠΎΡΠ°ΠΌ ΠΊΠΈΠ½ΠΎΠΊΡΠΈΡΠΈΠΊΠΎΠ² ΠΈ Π·ΡΠΈΡΠ΅Π»Π΅ΠΉ.
ΠΡΠ΅ΡΡΠ½ΡΠΉ ΠΎΡΠ΅Ρ... (Π²Π°Ρ ΠΎΡΠ·ΡΠ² Π·Π΄Π΅ΡΡ)
ΠΠ²Π°ΡΠ°Ρ
ΠΠ²Π°ΡΠ°Ρ (2009Β Π³.)Β β ΡΠ°ΠΌΡΠΉ ΠΊΠ°ΡΡΠΎΠ²ΡΠΉ ΡΠΈΠ»ΡΠΌ Π²ΡΠ΅Ρ Π²ΡΠ΅ΠΌΠ΅Π½. Π·Π°ΡΠ°Π±ΠΎΡΠΎΠΊ ΠΎΠΊΠΎΠ»ΠΎ 2,8Β ΠΌΠ»ΡΠ΄ Π΄ΠΎΠ»Π»Π°ΡΠΎΠ² Π‘Π¨Π.
ΠΠ²Π°ΡΠ°Ρ ΡΡΠΎ... (Π²Π°Ρ ΠΎΡΠ·ΡΠ² Π·Π΄Π΅ΡΡ)
Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΈΠ»Ρ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ ΡΠ°ΡΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ°, Π²Ρ ΡΡΠ°Π²ΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅Π΄ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΊΠ»Π°ΡΡΠ° ΡΠΎΡΠΊΡ (.) Π² ΡΠ²ΠΎΠ΅ΠΌ CSS. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΠΎΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π±Π»Π΅Π΄Π½ΠΎ-Π³ΠΎΠ»ΡΠ±ΠΎΠΉ ΡΠΎΠ½ ΠΈ ΡΠ΅ΠΌΠ½ΠΎ-ΡΠΈΠ½ΡΡ ΡΠ°ΠΌΠΊΡ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΠΎΠ±Π·ΠΎΡΠ°ΠΌ ΡΠΈΠ»ΡΠΌΠΎΠ² ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΡΡΡΠΈΠ² ΠΊΠΎ Π²ΡΠ΅ΠΌ Π°Π±Π·Π°ΡΠ°ΠΌ ΡΠ²ΠΎΠ΄ΠΊΠΈ:
div.ΠΎΠ±Π·ΠΎΡ { ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: #E6EBF5; /* Π±Π»Π΅Π΄Π½ΠΎ-Π³ΠΎΠ»ΡΠ±ΠΎΠΉ */ Π³ΡΠ°Π½ΠΈΡΠ°: 1px ΡΠΏΠ»ΠΎΡΠ½Π°Ρ #003399; /* ΡΠ΅ΠΌΠ½ΠΎ-ΡΠΈΠ½ΠΈΠΉ */ } ΡΡΡ.ΡΠ΅Π·ΡΠΌΠ΅ { ΡΡΠΈΠ»Ρ ΡΡΠΈΡΡΠ°: ΠΊΡΡΡΠΈΠ²; }
Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ²
ΠΠΎΠΌΠΈΠΌΠΎ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΊΠ»Π°ΡΡΠ° , Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°Π·Π½Π°ΡΠ°ΡΡ ΡΡΠΈΠ»ΠΈ ΠΏΠΎΡΠΎΠΌΠΊΠ°ΠΌ ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠΎΡΠΎΠΌΠΎΠΊ β ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Π»ΠΎΠΆΠ΅Π½ Π²Π½ΡΡΡΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (ΡΡΡΠ»ΠΊΠΈ) Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π±ΡΠ»ΠΈ ΠΊΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΠΈ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΡ. ΠΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS:
. Π° { ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ; ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅; }
ΠΠ΄Π½Π°ΠΊΠΎ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ΅Π½ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΈΠ»Ρ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ, ΡΠ²Π»ΡΡΡΠΈΡ ΡΡ ΡΠ°ΡΡΡΡ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΡ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΡΡΠΎ Π±ΡΠ» Π±Π΅Π»ΡΠΉ ΡΠ΅ΠΊΡΡ Π½Π° ΡΠ΅ΠΌΠ½ΠΎ-ΡΠΈΠ½Π΅ΠΌ ΡΠΎΠ½Π΅ Π±Π΅Π· ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΡ. ΠΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Ρ, ΡΡΠΎ ΡΡΠΈ ΡΡΡΠ»ΠΊΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅
ΠΡΠΎ Ρ!
Sample FAQ #3
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ°ΠΌ HTML, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ «id» ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ.
<Π΄Π΅Π»>ΠΡΠΈΠ²Π΅Ρ, ΠΌΠΈΡ!