CSS sınıflarını javascript ile nasıl yönetilir

Feb 10, 2026

Nasıl Yapılır

Kullanıcı etkileşimini içeren basit web projeleri geliştirirken, CSS'deki durumdaki değişiklikleri ne kadar iyi yönetirse, düşünce için yiyecek olur. Kullanıcı bir akordeon'u genişlettiğinde veya bir menüyü değiştirdiğinde, CSS tarzı değişiklikleri nasıl uygulanmalıdır? Bir popüler çözüm, belirli sınıf isimlerini kullanan bir adlandırma sözleşmesi, aktif veya genişletilmiş stil kancaları olarak.

12 Ortak JavaScript soruları cevaplandı

Bu eyaletli sınıflar genellikle JavaScript'te yönetilecektir. Sahte Android uygulamasını indirin ve aç Web sitesi şablonu metin editörünüzdeki dizin ve bunu kendiniz için görebilirsiniz. dev / js / main.js .

Burada fark edebileceğiniz bir şey, çok benzer sınıf geçişlerini tetikleyen bir sürü yinelenen kod parçacıkları var. Muhtemelen, eğer bu proje büyüklüğünde büyüyecekse, kopyaların miktarı olacaktır. Bunun yerine, aynı görevi gerçekleştiren ve tekrar tekrar tekrar kullanılabilecek ve farklı elemanlarda farklı durum sınıflarını değiştirebilen tek bir JavaScript işlevi yazmak yerine çok daha verimli bir yaklaşım olacaktır. Bu eğitimde, sadece bunun nasıl yapılacağını keşfedeceğiz.

Başlamak için, konsolunuzda, CD 'Web Sitesi Şablonu' ve Çalıştır npm yükleme Projenin düğümü bağımlılıklarını yüklemek için. Çalışıyoruz dev Buradan itibaren dizin.

01. HTML5 veri özniteliklerini kullanarak

The 'heres-one-i-made-earlier' directory contains the finished tutorial — 'Heres-One-i-Made-önceki' dizini, bitmiş öğreticiyi içeriyor

İçinde index.html , bul .js-açıklama Satır 103'teki öğe ve aşağıdaki HTML5 veri özniteliklerini takın. Bilgi depolamak için bu kalıbı kullanıyor olacağız. jsdescription Tıklanır, yeniden kullanılabilir işlevimiz, geçiş yapmak istediğimiz sınıfı ve değiştirilmesi gereken unsurları bilecektir.

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

02. Data-class.js oluşturun

Comments on the code in /js/data-class.js will take you through the finished function — Koddaki yorumlar **/js/data-class.js** sizi bitmiş fonksiyondan alacak

İçinde js dizin, denilen yeni bir dosya oluştur data-class.js . Yeniden kullanılabilir işlevimizi geliştireceğimiz yer burasıdır. İçinde, kodumuzu kapsayan ve ardından ithal etmek için bir Iife (hemen çağrılan işlev ifadesi) yazın. closestparent Öğreticiye daha sonra kullanacağımız yardımcı.

 (işlev () {var closestParent = gerekli ("../../ node_modules / orionjs / helpers / closestparent.js");
}) ();

03. Elemanları kapmak ve döndürmek

Yardımcı ithalatın altında, tüm unsurların bir nodelisti oluşturmamız gerekecek dataclass Nitelikler, isteğe bağlı olmayacak tek özelliktir. Sonra, daha sonra bir klasik ile onları döndüreceğiz. İÇİN Döngü böylece her bir öğeye erişebiliriz.

 Var Elems = Belge .Queryselectorall ("[Data-Class]"), a; için (a = 0; a ve lt; elems.length; a ++) {
}

04. Click olay dinleyiciyi ekleyin

İçinde İÇİN Döngü, tıklama olaylarını izlemek için bir etkinlik dinleyicisi ekleyin, bu nedenle, kullanıcının sınıf değiştirmeyi tetiklemek istediğimiz öğeyi ne zaman tıkladığınızı biliyoruz (AKA tetik öğesi). İçinde, arayın ProcessChange () İşlev ve fonksiyonun kapsamında erişilebilir olan tıklanan öğeye referans verin. bu Anahtar kelime.

 Elems [a] .addEventListener ("Tıkla", Function () {
proseschChange (bu); });

05. Klavye etkinlik dinleyicisi ekleyin

Olay dinleyicinin hemen altında, basını izlemek için bir tane daha ekleyin. giriş anahtar ve sonra aynı şekilde çalıştırın ProcessChange () işlevi. Fare gibi işaretleme aygıtlarını kullanamayan kullanıcıları dikkate alarak erişilebilirliği artırmak için klavye olaylarına destek ekliyoruz.

 Elems [a] .addEventListener ("KeyPress", İşlev (E) {
if (e.which === 13) {e.preventDefault (); proseschChange (bu);
}});

06. MouseDown Etkinlik Dinleyici Ekleme

Bir öğeyi çift tıklatmak genellikle içindeki tüm metni vurgular. Tetikleme öğesine mantık eklersek, bu işlevi önlemek istediğimiz bir şeydir. Bunu yapmak için bir mousedown Olayları aramak için etkinlik dinleyicisi önleme () Yöntem ve iptal varsayılan davranışını iptal edin.

 Elems [a] .addeventlistener ("MouseDown", İşlev (E) {
e.preventDefault (); });

07. ProcessChange () işlevi oluşturma

Hemen sonra closestparent İçe aktar, denilen bir işlev oluştur ProcessChange () bu bir öğeyi kabul eder. Bu, önceki adımlarda başvurulan aynı fonksiyondur ve tüm mantığımızı işlem sınıfını hedef öğeye geçiş yapması için tutacaktır.

İşlev içinde, elemanların içeriğini alın veri sınıfı öznitelik ve bir diziye bölün. Bu, tek veri özniteliğinde birden fazla virgülle ayrılmış sınıflara izin vermek içindir.

 Var ProcessChange = İşlev (Elem) {Var DataClass = Elem .dataset.class.split (",");
}

08. Veri sınıfı-kapsam özniteliği

Sonraki, işlev içinde, bir varlığını kontrol edin. Veri sınıfı kapsamı Eğer bulunursa, daha önce olduğu gibi bir diziye ayrılırsa öznitelik. Veri sınıfı kapsamı Sınıf geçişinin nerede olacağını sınırlamanızı sağlayan isteğe bağlı bir özelliktir.

Örneğin, eğer dataClass-kapsamı ayarlandı js-my-element Bu, bunun çocukları olan hedef unsurlar tetik öğesinin tıklamasından etkilenir.

 if (elem.dataset.classscope) {var dataclassscope = elem.dataset.classscope.split (",");
}

09. Veri sınıfı-element niteliği

veri sınıfı Öznitelik, başka bir isteğe bağlı özelliktir. Sınıf geçişinin etkilenmesi gereken elemanı belirtir. Aşağıdaki snippette, varlığını kontrol ediyoruz ve varsa içeriğini daha önce olduğu gibi bir diziye dönüştürüyoruz. Yine de, eğer bulunmazsa, hem hedef öğeyi hem de kapsamını tetik elemanına ayarlayacağız, bu, tıklandığında, sınıf değişikliğini kendi başına tetikleyecektir.

 if (elem.dataset.classelement) {var datacelasselement = elem.dataset.classelement.split (",");
}
else {var datacelasselement = [elem.classlist ]; if (! DataClassScope) {
Var DataClassScope = DataSclasTelement; }}

10. Kurulum sınıfı geçiş döngüsü

Çünkü her ikisi de veri sınıfı ve veri sınıfı Birden fazla virgül ayrılmış değerleri kabul et, ilan etmeliyiz. datal boynu değişken ve ikisi arasındaki en büyük özelliğin uzunluğunu atayın. Bu, bir hedef öğeyi kaçırmadığımızdan emin olmak için yeterince döngü yaptığımızdan emin olmak içindir.

 Var Datalenth = Math.max (DataClasselement.Length, DataClass.Length), b; için (B = 0; B, DATALLD; B ++) {
}

11. Öznitelik değerlerinde tekrarlama azaltın

Veri niteliklerinin yinelenen değerlere sahip olması mümkündür. Örneğin & lt; bir veri sınıfı = "Gizli, Gizli" veri sınıfı-element = "JS-Elem, JS-Elem2" & gt; işlevin geçerli bir kullanımıdır, sadece belirtilmesi gerekmek daha iyi olur. gizlenmiş bir Zamanlar.

Bunu yapmak için, içinde mantık ekleyeceğiz. datal boynu İÇİN eğer bir döngü veri sınıfı veya veri sınıfı Giriş eksik, son geçerli olanı kullanın. Bu şu anlama gelir & lt; bir dataclass = "hidden" veri sınıfı-element = "JS-Elem, JS-Elem2" & gt; de işe yarayacaktı.

 Eğer (DataClass [B]! == undefined)
var elemclass = DataClass [b]; } Eğer (DataSclassemelement [b]! == undefined) {
var dataClasselementValue = DataSaClasTelement [b]; }

12. Tekrarlamayı azaltın

Hala içinde İÇİN döngü, yine aynı, ama Veri sınıfı kapsamı öznitelik. Bir kapsamımız yoksa, son geçerli olanı kullanın. Bu, bir kapsamın birçok sınıf geçişini etkilemesini sağlar.

 Eğer (DataClassscope & Amp; & Amp; DataClassScope [B]! == undefined) {
var cachedscope = dataClassscope [b]; } Diğer ise (cachedscope) {
DataClassScope [B] = CACHEDSCOPE; }

13. Kapsam Uygula: Bölüm 1

İçindeki son şey İÇİN Döngü Yapmamız gereken her şeyden önce yapmalıyız. Kapsam verilerini kontrol eden şartlı bir ifade oluşturarak başlayacağız ve hiçbiri bulunmazsa, yalnızca genel belge kapsamını kullanır.

 Eğer (DATACLASSSCOPE & AMP; & AMP; DATACLASSSCOPE [B]! == "false") {
}
else {var elemref = document.queryselectorall ('. $ {dataclasselementvalue}'), c; }

14. Kapsam uygulayın: Bölüm 2

Boşta, önceki adımdan itibaren açıklamada, aşağıdaki snippet'i ekleyin. Bu, tanımlanan öğeyi bulur. Veri sınıfı kapsamı ( elemparent ) ve sonra tüm çocuk elemanları eşleşen bir dizi oluşturur. veri sınıfı ( elemref ). Kapsam ve hedef elemanlar aynı ise, referansı da değiştirilecek öğelerin listesine eklenir.

 var elemparent = ClosestParent (Elem, DataClassscope [b]),
elemref = [] .slice.call (elemparent .Queryselectorall ('. $ {dataclasselementvalue}')), c;
if (elemparent.classlist. İçerir (dataclasselerementvalue)) {elemref.unshift (elemparent); }

15. Sınıfları değiştir

Sonunda, dibinde İÇİN Döngü, oluşturduğumuz verileri kullanalım ve tüm doğru öğelerdeki tüm doğru sınıfları değiştirelim. Bunu yapmak için yeni bir ihtiyacımız var İÇİN geçmek için döngü Elemref'nodelist / dizi , her bir elemana erişin sınıf listesi API ve sonra kullanın Geçiş () değerini eklemek veya kaldırmak için yöntem elemcless .

 için (C = 0; C) Elemref.Length; C ++) {ElemRef [C] .Classlist.Toggle (ElemClass); }

16. İşlevi ekleyin

Şimdi işlev tamamlandı, dahil etmeliyiz. main.js . Bunu yapmak için, snippet'i aşağıya kopyalayın ve dosyanın en üstüne ekleyin. İve işlevi. Ayrıca kodun çoğuna ihtiyacımız yok main.js , bu yüzden her şeyi tekrar sil STOP BOX SANT GÖRÜNTÜNÜ Olay Kabarcık snippet.

 gerektirir ("./ data-class.js");

17. Favori simgelere ekleyin

İşlevi kullanmak için. İçinde index.html , favori simgesinin tüm örneklerini bir js yıldızı sınıf. Aşağıdaki özniteliği ekleyin ve tıklandığında eklenmelidir. aktif kendisine, yokluğunda olduğu gibi veri sınıfı , tetikleyici eleman kendini hedef öğe olarak kullanır.

data-class = "IS-Active"

18. Oyun bağlantılarına ekleyin

Daha sonra, tıklandığında, ev slaytındaki oyun kutusu sanatlarını bağlamamız gerekir. aktif Doğru video oyun slaytına eklenirken, mevcut ev slaytından da çıkarılır. Aşağıda, eklemeniz gereken özelliklerdir. JS-TEST-GAME-1 img. Diğerleri aynı deseni takip ediyor, sadece değiştirin Test Oyunu-1 Yeni oyun başlığı ile.


  data-class = "IS-Active" veri sınıfı-eleman = "JS-TEST-GAME1 - Slayt-Slayt, JS-Home-slide"

19. Kutu ekle Sanat geçişleri

Her oyunda, kutu sanatının önünü ve arkasını değiştiren bir anahtardır. Bu çalışmaları yapmak için, her bir örneğine snippet'i ekleyin. js-boxart-geçiş . Birkaç şeye tıklandığında: saygısız açılır js-boxart ebeveyni kapsamında js-slayt , İken kontrol edildi tetik elemanında geçiş yapılır.


  Data-Class = "IS-Clipped, IS Kontrol Edildi" Veri sınıfı-element = "JS-Boxart, JS-BoxArt-Toggle" Data-Score-Scope = "JS- Slayt, JS-BoxArt-Toggle "

20. Geri oklara ekleyin

Son olarak, aşağıdaki nitelikleri tüm örneklerine eklememiz gerekir. JS-CanceldDescription ve JS-Cancel oyunu Buna tıklandığında, ev slaydına geri dönersiniz.

data-class = "IS-Active" veri sınıfı-element = "JS-Slide, JS-Home-sliend" veri sınıfı-kapsam = "JS-Slide, False"

21. Projeyi oluştur

On build, Browserify will follow the paths passed to require() and intelligently concatenate everything into a single JS file — İnşa üzerine, tarayıcıya geçen yolları takip edecek **gerektirir ()** ve akıllıca her şeyi tek bir JS dosyasına birleştirin

Terminalde, projeyi oluşturmak için aşağıdaki komutu çalıştırın. Bu, projenin yeni bir şekilde derlenmiş bir versiyonunu oluşturacak dist dizin. Bu komut NPM komut dosyalarını kullanır - homurdanma veya Gulp gibi tam işlevsel yapı araçlarına basit, yerel bir NPM alternatifi.

 NPM Run Build

22. Projeye servis yapın.

Son olarak, terminalde, hizmet vermek için yerel bir sunucu oluşturmak için aşağıdaki komutu çalıştırın. dist Klasör. Terminalde döndürülen bağlantı noktası numarasını not edin. Tarayıcıda gezin http: // localhost: Port numarası bitmiş projeyi görüntülemek için.

 NPM Run servisi

23. Projeyi test edin

Now make sure it all works — Şimdi hepsinin çalıştığından emin olun

Şimdi projeyi bitirdiniz, tüm sınıf mantığı şimdi yeniden kullanılabilir fonksiyonumuz tarafından ele alınmaktadır. Bu bir canlı proje olsaydı, zaman geçtikçe daha fazla sayfa veya bileşen eklenmişse, bunlar için yeni bir sınıf mantığı ekleme kolaylığı, her bir örnek için ısmarlama işlevselliği yazmak zorunda kalmayacağımız için büyük ölçüde azalır.

Bu makale başlangıçta Web Tasarımcısı, Creative Web Design Magazine, uzman öğreticiler, son teknoloji trendler ve ücretsiz kaynaklar sunan. Burada web tasarımcısına abone olun .

İlgili Makaleler:

CSS ızgara düzeni sırları ortaya çıktı
21 Javascript'in Üst Örneği
Daha iyi CSS yazmak için bir rehber