Jak spravovat CSS třídy s JavaScriptem

Feb 9, 2026

jak

Při vývoji jednoduchých webových projektů, které zahrnují interakci uživatele, jak nejlépe spravovat změny stavu v CSS se stává potravou pro myšlenku. Když uživatel rozšiřuje akordeon nebo přepíná nabídku, jak by měly být použity změny stylu CSS? Jedním z populárního řešení zahrnuje stavové třídy, konvenci pojmenování, která využívá jména tříd, jako je je aktivní nebo je expandován jako styl háčků.

12 Odpovězené otázky běžného JavaScriptu

Tyto stavové třídy by typicky byly spravovány v JavaScriptu. Stáhněte si aplikaci Mock Android a otevřete Webové stránky šablony adresář v textovém editoru a můžete to vidět pro sebe dev / js / main.js .

Jedna věc, kterou si můžete všimnout, je, že existuje spousta duplicitního kódu úryvků, které spustí velmi podobná třídní přepínače. Pravděpodobně, pokud by tento projekt měl růst, takže by množství duplikátů. Mnohem efektivnější přístup by bylo místo toho napsat jeden JavaScript funkci, která provádí stejný úkol a může být znovu a znovu znovu použit - ale přepínat různé stavové třídy na různých prvcích. V tomto tutoriálu prozkoumáme, jak to udělat.

Chcete-li začít, ve vaší konzole, CD do, webové stránky šablony 'a běh NPM Install. Instalace závislost na uzlu projektu. Budeme pracovat v dev adresář odtud ven.

01. Použití atributů dat HTML5

The 'heres-one-i-made-earlier' directory contains the finished tutorial — Adresář 'heres-one-i-made-made-weader' obsahuje hotový tutoriál

v index.html. , najít .js-popis Prvek na lince 103 a připojit níže uvedené atributy dat HTML5. Tento vzor budeme používat k ukládání informací, takže kdy jsdescription. Je kliknut, naše opakovaně použitelná funkce bude znát třídu, kterou si přejeme přepínat a prvky, na které by měly být přepínány.

data-class="is-active" data-class-element ="js-description-slide, js-home-slide"

02. Vytvořit data-class.js

Comments on the code in /js/data-class.js will take you through the finished function — Komentáře k kódu v **/js/data-class.js.** Vezme vás přes hotovou funkci

V JS. Adresář, vytvořte nový soubor Data-Class.js. . To je místo, kde budeme budovat naši opakovaně použitelnou funkci. Uvnitř, napište iife (okamžitě vyvolaný výraz funkce) pro zapouzdření našeho kódu a poté importovat closeestarent Pomocník, který budeme používat později v tutoriálu.

 (funkce () {var countestarent = Vyžadovat ("../../ node_modules / orionjs / pomocníci / closestarent.js");
}) ();

03. Grab elementy a smyčka přes

Pod importem Pomocného, budeme muset vytvořit nodelist všech prvků Dataclass. Atributy, protože se jedná o jediný atribut, který nebude volitelný. Dále je pak smyčkou přes klasiku PRO Smyčka, takže můžeme přistupovat ke každému jednotlivému prvku.

 var elems = dokument .querySelektorall ("[třída dat]"), a; pro (A = 0; A & lt; elems.length; A ++) {
}

04. Přidat komu posluchač událostí

V rámci PRO Smyčka, přidat posluchače události, aby se díval na události na kliknutí, takže víme, kdy uživatel klikne na prvek, který si přejeme spouštět přepínače třídy (AKA spouštěcí prvek). V něm zavolejte Processchange () funkce a předat odkaz na klikaný prvek, který v rozsahu funkce je přístupný přes tento klíčové slovo.

 Elox [A] .AdDeventListener ("Click", funkce () {
Proceschange (toto); });

05. Přidat posluchač události klávesnice

Hned pod kliknutím události posluchače přidejte další sledovat stisknutí enter. a pak běžte stejně Processchange () funkce. Přidáváme podporu událostí klávesnice pro zlepšení dostupnosti zvažováním uživatelů, kteří nemohou používat polohovací zařízení, jako je myš.

 Elox [A] .AddeventListener ("Keypress", funkce (e) {
Pokud (e.which === 13) {e.preventdefault (); Proceschange (toto);
}});

06. Přidejte posluchač událostí Mousedown

Poklepáním na prvek často zdůrazňuje celý text v něm. Pokud přidáváme logiku na spouštěcí prvek, když kliknete na tuto funkci, je něco, co bychom chtěli zabránit. Chcete-li to udělat, přidejte mousedown. Posluchač událostí zavolat události preventDefault () a zrušit výchozí chování.

 Elox [A] .AdDeventListener ("Mousedown", funkce (e) {
e.preventdefault (); });

07. Vytvořit funkci procesnictví ()

Těsně po. closeestarent Import, vytvořte funkci Processchange () který přijímá prvek. Toto je stejná funkce, která odkazuje v předchozích krocích a bude držet všechny naše logika pro zpracování třídní přepínače na cílovém prvku.

V rámci funkce uchopte obsah prvků Data-Class. Atribut a rozdělit do pole. To je umožnit více tříd oddělených čárkami v rámci atributu jednotlivých dat.

 var procesů = funkce (elem) {var dataclass = elem .dataset.class.split (",");
}

08. Atribut Data-Class-Scope

Další, v rámci funkce, zkontrolujte přítomnost A Data-Class-Scope Atribut, je-li nalezen, rozdělte do pole jako dříve. Data-Class-Scope je volitelný atribut, který vám umožňuje omezit, kde dojde k přepínání třídy.

Například, pokud Dataclass-Safety. byly stanoveny JS-MY-ELEMENT , Pouze cílové prvky, které jsou děti, by byly postiženy kliknutím na spouštěcí prvek.

 Pokud (elem.dataSet.classscope) {var dataclassscope = elem.dataset.classscope.Split (",");
}

09. Atribut třídy dat

. \ T prvek třídy dat Atribut je další volitelný atribut. Určuje prvek, který by třídy přepínání měla ovlivnit. V pod úryvku níže, kontrolujeme svou přítomnost a je-li nalezen, převést jeho obsah do pole předtím. Ačkoli, pokud to není nalezeno, nastavíme jak cílový prvek, tak oblast působnosti na spouštěcí prvek, což znamená, že když kliknete, spustí změnu třídy na sebe.

 Pokud (elem.dataSet.classelement) {var dataclasselement = elem.dataset.classelement.Split (",");
}
Jinak {var dataclasselement = [elem.classlist ]; Pokud (! Dataclassscope) {
var dataclassscope = Dataclasselement; }}

10. SETUP CLASS CLASS TOGLE

Protože oba Data-Class. a prvek třídy dat Přijměte více hodnot oddělených čárkami, musíme deklarovat Datová délka Proměnná a přiřadit délku největším atributu mezi oběma. To je zajistit, abychom se ujistili, že jsme se ujistili, že si nenecháme ujít cílový prvek.

 var datalength = math.max (dataclasselement.length, dataclass.length), b; pro (b = 0; b & lt; Datalength; b ++) {
}

11. Snižte opakování hodnoty atributů

Je možné, aby atributy dat měly duplicitní hodnoty. Například & lt; A Data-Class = "IS-Skrytý, je-skrytý" Data-Class-Element = "JS-Elem, JS-Elem2" & Gt; Je platný použití funkce, bude mnohem lepší musí pouze určit je skrytý jednou.

Chcete-li to udělat, přidáme logiku Datová délka PRO smyčka, která je Data-Class. nebo prvek třídy dat Zápis chybí, použijte poslední platný. To znamená & lt; dataclass = "is-skrytý" prvek dat-třídy = "js-elem, js-elem2" & gt; bude fungovat stejně.

 Pokud (Dataclass [b]! == undefined) {
var elemclass = dataclass [b]; } Pokud (Dataclaslasselement [b]! == undefined) {
var dataclasselementValue = dataclasselement [b]; }

12. Snižte opakování

Stále v rámci PRO smyčka, totéž znovu, ale s Data-Class-Scope atribut. Pokud nemáme rozsah, použijte poslední platný. To umožňuje jeden rozsah ovlivnit mnoho tříd třídy.

 IF (DataclassScope & Amp; Dataclassscope [b]! == undefined) {
var cachedscope = dataclassscope [b]; } Jinak, pokud (CachedScope) {
DataclassScope [B] = CachedScope; }

13. Aplikujte rozsah: Část 1

Poslední věc v PRO Smyčka Musíme udělat, než budeme mít vše, co potřebujeme ke spuštění třídy přepínače, je ujistěte se, že pokud je definován rozsah, pouze prvky v rámci je zaměřeno. Začneme vytvořením podmíněného prohlášení, které kontroluje data rozsahu, a pokud není nalezena žádná stačí použít globální rozsah dokumentu.

 Pokud (DataclassScope & Amp; Dataclassscope [b]! == "FALSE") {
}
else {var elemref = dokument.querySelektorall ('.'. $ {DataclasselementValue} '), c; }

14. Aplikujte rozsah: Část 2

V rámci prázdného, pokud prohlášení z předchozího kroku přidejte níže uvedený úryvek. To najde prvek definovaný v Data-Class-Scope ( elemparentní ) a pak vytváří řadu všech dětských prvků odpovídajících prvek třídy dat ( elemref. ). Pokud jsou rozsah a cílové prvky stejné, jeho odkaz je také přidán do seznamu prvků, které chcete upravit.

 var elemparent = callparent (elem, dataclassscope [b]),
elemref = [] .slice.call (elemparent .queryselectorall ('.'. $ {DataclasselementValue} '), c;
pokud (elemparent.classlist. Obsahuje (dataclasselementValue)) {elemref.unshift (elemparent); }

15. Přepněte třídy

Konečně, v dolní části PRO smyčka, pojďme používat data, která jsme vybudovali a přepínali všechny správné třídy na všech správných prvcích. K tomu potřebujeme nový PRO smyčka projít elemref'nodelist / Array. , přístup ke každým prvkům claslist API a pak použijte Přepnout () metoda přidat nebo odstranit hodnotu elemclass. .

 pro (c = 0; c

16. Zahrnout funkci

Nyní je funkce dokončena, musíme ji zahrnout Main.js. . Chcete-li to provést, zkopírujte pod úryvkem níže a přidejte jej do horní části souboru, ale uvnitř Iife. funkce. Nejvíce nepotřebujeme většinu kódu Main.js. , tak smažte všechno až do Zastavit Box Art Zaškrtněte políčko Bublina úryvek.

 Vyžaduje ("./ Data-Class.js");

17. Přidat do oblíbených ikon

Nyní použijte funkci. v index.html. , najděte všechny instance oblíbené ikony s JS-Star. třída. Přidat níže uvedený atribut a při klepnutí by mělo přidat je aktivní pro sebe, jako v nepřítomnosti prvek třídy dat Spoušťový prvek se používá jako cílový prvek.

třída dat = "is-aktivní"

18. Přidat do herních odkazů

Dále potřebujeme propojit herní schránku umění na domovském snímku, takže při kliknutí, je aktivní Přidá se ke správnému snímku videohry, zatímco také odstraněn z aktuálního domova. Níže jsou uvedeny atributy, které byste měli přidat JS-Test-Game-1 img. Ostatní následují stejný vzor, jen nahradit Test-game-1 s novým titulem hry.

  Data-Class = "IS-Active" Data-Class-Element = "JS-TEST-GAME1 - Slide-Slide, Slide-Slide-Slide"

19. Přidat do rámečku Art Přepíná

Na každém hře je sklíčko přepínač, který přepíná přední a zadní část boxu. Chcete-li provést tyto práce, přidejte úryvek do každé instance js-boxart-přepínač . Když kliknete na řadu věcí: is-otopipovaný je zapálen JS-Boxart. Scoped rodiči JS-Slide. , zatímco je-zaškrtnuto je přepínat na spouštěcím prvku.

  Třída dat = "is-otopipped, je-zaškrtnuto" Data-Class-Element = "js-boxart, js-boxart-přepínač" Data-Class-Scope = "JS- Snímek, JS-Boxart-přepínač "

20. Přidat do šipek

Nakonec musíme přidat atributy níže ke všem instancím JS-Canceldescription. a JS-Cancel-Game Takže když jste klikli na vás zpět na domovský snímek.

  Data-Class = "IS-Active" Data-Class-Element = "JS-Slide, JS-Home-Slide" Data-Class-Scope = "JS-SLOW, FALSE"

21. Sestavte projekt

On build, Browserify will follow the paths passed to require() and intelligently concatenate everything into a single JS file — Na sestavení, prohlížeče bude následovat cesty **vyžadovat()** a inteligentně zřetězte vše do jednoho souboru JS

V terminálu spusťte příkaz níže pro vytvoření projektu. To vytvoří sestavenou verzi projektu v novém dist.da adresář. Tento příkaz používá skripty NPM - jednoduchá, nativní alternativa NPM k plně funkčním nástrojům sestavení, jako je například Grunt nebo Gulp.

 NPM Run Build

22. Podáváme projekt.

Konečně, v terminálu spusťte příkaz níže a vytvořte místní server, který chcete sloužit dist.da Složka. Vezměte na vědomí číslo portu vráceného v terminálu. V prohlížeči přejděte na http: // localhost: Vaše-port-číslo zobrazení hotového projektu.

 NPM Run Server

23. Otestujte projekt

Now make sure it all works — Nyní se ujistěte, že to všechno funguje

Nyní jste dokončili projekt, vše logika třídy je nyní zpracovávána naší opakovaně použitelnou funkcí. Pokud se jednalo o živý projekt, a další strana nebo komponenty byly přidány, jak čas pokračoval, snadnost přidávání nové třídy logiky pro tyto by bylo značně sníženo, protože již nemáme zapisovat funkčnost na míru pro každou instanci.

Tento článek byl původně publikován v čísle 267 webového designéra, časopis Creative Web Design - nabízet odborné konzultace, špičkové trendy a volné zdroje. Přihlásit se zde web designer zde .

Související články:

CSS mřížky rozložení tajemství odhalila
21 Top příklady JavaScriptu
Průvodce pro psaní lepší CSS