Kod Atölyesi
Yapay Zeka
HTML Dersleri
CSS Dersleri
JavaScript Dersleri
İçindekiler
Web geliştiriciliği denince akla sadece HTML ve CSS gelmemelidir. Dinamik web sayfaları oluşturmak için JavaScript’in sunduğu güçlü araçları da kullanmak gerekir. Bu araçlardan biri de DOM (Document Object Model) üzerinden elementlere CSS class bilgisi eklemek veya çıkarmaktır. Bu yazımızda, hem başlangıç seviyesindeki geliştiriciler için anlaşılır bir dille hem de ileri düzey kullanıcıların işine yarayacak örneklerle konuyu detaylı bir şekilde ele alacağız.
DOM Nedir?
DOM (Document Object Model), bir web sayfasını belge olarak temsil eden, hiyerarşik bir yapıdır. Tarayıcı, HTML içeriğini okuduktan sonra bu belge modelini oluşturur. DOM sayesinde sayfadaki her bir öğe (örneğin <div>, <p>, <a>, <img> vb.) JavaScript ile programlı bir şekilde seçilebilir, değiştirilebilir, eklenebilir ya da silinebilir.
DOM’un en önemli avantajlarından biri, kullanıcı etkileşimlerine göre sayfa içeriğini ve stilini gerçek zamanlı olarak değiştirmeye olanak tanımasıdır. Bu da kullanıcı deneyimini ciddi oranda iyileştirir.
CSS Class Nedir?
HTML elementlerine stil vermek için kullandığımız class (sınıf) özelliği, birden fazla öğeye aynı stil kurallarını uygulamamıza imkân tanır. Örneğin, .btn adlı bir class tanımlayıp, sayfadaki tüm butonlara bu class’ı verirseniz, tümü aynı stil kurallarına sahip olur.
JavaScript sayesinde bu class’ları dinamik olarak ekleyebilir, çıkarabilir veya değiştirebiliriz. Bu sayede örneğin bir butona tıklanınca arka plan rengini değiştirmek, bir form hatalıysa ilgili alanı kırmızı yapmak gibi işlemleri kolaylıkla gerçekleştirebiliriz.
JavaScript ile CSS Class Eklemek
HTML elementlerine CSS class’ı JavaScript ile eklemek oldukça kolaydır. Bunun için element.classList.add() metodunu kullanırız.
Örnek 1: Basit Buton Örneği
<button id="myButton">Tıkla</button>
const button = document.getElementById("myButton");
button.classList.add("highlight");
Bu örnekte, myButton id’sine sahip butona highlight adında bir CSS sınıfı eklenir.
CSS Tanımı:
.highlight {
background-color: yellow;
color: black;
padding: 10px;
border-radius: 5px;
}
Bu stil, butonun dikkat çekici görünmesini sağlar.
JavaScript ile CSS Class Kaldırmak
Bir elementten CSS sınıfını kaldırmak için classList.remove() metodunu kullanabiliriz.
Örnek 2: Class Kaldırma
button.classList.remove("highlight");
Bu kod, highlight sınıfını kaldırarak butonun eski haline dönmesini sağlar.
Bu yöntemi kullanıcı belirli bir işlemi tamamladıktan sonra öğeye uygulanan görsel vurguyu kaldırmak için kullanabilirsiniz.
Class Var mı Kontrol Etmek
Bir HTML öğesinin belirli bir class’a sahip olup olmadığını kontrol etmek için classList.contains() metodunu kullanırız.
Örnek 3: Class Kontrolü
if (button.classList.contains("highlight")) {
console.log("Highlight sınıfı aktif.");
} else {
console.log("Highlight sınıfı bulunamadı.");
}
Bu sayede, kullanıcıdan gelen bir etkileşim sonrasında bir öğenin o an hangi görsel duruma sahip olduğunu kontrol edebilirsiniz.
Class’ı Aç/Kapat (Toggle Etmek)
Bir class’ı eklemek ya da kaldırmak için kullanılan en pratik yöntem classList.toggle() fonksiyonudur. Bu metod, eğer class yoksa ekler, varsa kaldırır.
Örnek 4: Toggle Kullanımı
button.addEventListener("click", () => {
button.classList.toggle("highlight");
});
Her tıklamada highlight sınıfı eklenecek veya kaldırılacaktır. Bu, butonları aktif/pasif hale getirmek gibi durumlar için idealdir.
Gerçek Hayattan Uygulama: Açılır Menü
Birçok web sitesinde, hamburger menü gibi mobil uyumlu tasarımlarda veya ayarlar panellerinde menüyü gizlemek ve göstermek için class ekleme/çıkarma kullanılır.
HTML:
<button id="menuToggle">Menüyü Aç/Kapat</button>
<div id="menu" class="hidden">
<ul>
<li>Ana Sayfa</li>
<li>Hakkımızda</li>
<li>İletişim</li>
</ul>
</div>
CSS:
.hidden {
display: none;
transition: all 0.3s ease;
}
.visible {
display: block;
}
JavaScript:
const toggleButton = document.getElementById("menuToggle");
const menu = document.getElementById("menu");
toggleButton.addEventListener("click", () => {
menu.classList.toggle("visible");
menu.classList.toggle("hidden");
});
Bu yapı sayesinde, kullanıcı butona her tıkladığında menü görünür ya da gizli olur. Bu yöntem, mobil duyarlı menü sistemleri veya açılır paneller için idealdir.
Ekstra Örnek: Form Hatası Vurgulama
HTML:
<form id="loginForm">
<input type="text" id="username" placeholder="Kullanıcı adı">
<button type="submit">Giriş Yap</button>
</form>
CSS:
.input-error {
border: 2px solid red;
background-color: #ffe6e6;
}
JavaScript:
const form = document.getElementById("loginForm");
const username = document.getElementById("username");
form.addEventListener("submit", (e) => {
e.preventDefault();
if (username.value === "") {
username.classList.add("input-error");
} else {
username.classList.remove("input-error");
}
});
Bu örnekte, kullanıcı formu boş gönderdiğinde giriş alanı kırmızı olur. Kullanıcı doğru bilgi girerse class kaldırılır ve görünüm normale döner.
Sonuç
JavaScript ile DOM üzerinden CSS class bilgisi eklemek, kaldırmak, kontrol etmek ve toggle etmek; web sayfalarının daha dinamik, kullanıcı dostu ve etkileşimli olmasını sağlar. Bu yöntemlerle butonların görünümünü değiştirebilir, menüleri gizleyip gösterebilir veya hata uyarılarını görsel olarak belirgin hale getirebilirsiniz.
Bu yazıda değindiğimiz classList.add(), classList.remove(), classList.contains() ve classList.toggle() metodları modern web geliştiricilerinin sıkça kullandığı temel araçlardır. Uygulamalarınıza esneklik ve profesyonellik katmak için bu yöntemleri sık sık kullanmanızı öneririz.
Ayrıca SEO açısından bu gibi konular oldukça değerlidir. “JavaScript ile class ekleme”, “DOM class yönetimi”, “JS class toggle örnekleri” gibi anahtar kelimeler, içeriklerinizin arama motorlarında üst sıralarda yer almasına katkı sağlar. İçeriğinizin hem arama motorları hem de okuyucular için zengin, örneklerle desteklenmiş ve faydalı olması, uzun vadede dijital görünürlüğünüzü artıracaktır. Daha fazlası için “Javascript” ve “Kod Atölyesi” kategorilerine bakabilirsin.
JavaScript ile birden fazla class nasıl eklenir?
classList.add()metoduna birden fazla parametre vererek birden çok class ekleyebilirsiniz.Aynı class tekrar tekrar eklenirse ne olur?
classList.add()metodu aynı class’ı tekrar tekrar eklemez. Yani class zaten varsa, yeniden eklenmez.classList.toggle()kullanmak mı yoksaif-elseileadd/removeyapmak mı daha iyidir?Kısa ve sade kod yazmak istiyorsanız
classList.toggle()kullanmak daha pratik bir çözümdür. Ancak özel koşullar kontrol edilecekseif-elseyapısı tercih edilebilir.Class ekleyip kaldırırken animasyon eklemek mümkün mü?
Evet. CSS geçiş (
transition) özelliklerini kullanarak class değişimlerine animasyon ekleyebilirsiniz.JavaScript ile var olan tüm class’lar nasıl silinir?
Bir elementin
classNameözelliğini boş string yaparak tüm class’ları temizleyebilirsiniz: element.className = “”;Class değişimleri SEO’yu etkiler mi?
Hayır, class değişimleri doğrudan SEO’yu etkilemez çünkü arama motorları JavaScript ile dinamik olarak değişen stilleri her zaman tam olarak anlamayabilir. Ancak kullanıcı deneyimini artırdığı için dolaylı olarak SEO’ya katkı sağlar.
jQuery’de class ekleme/kaldırma nasıl yapılır?
jQuery kullanıyorsanız
.addClass(),.removeClass(),.toggleClass()metodlarını kullanabilirsiniz:classListtüm tarayıcılarda çalışır mı?Modern tarayıcıların tümü
classListözelliğini destekler. Ancak çok eski tarayıcılarda (örneğin IE9 ve öncesi) desteklenmeyebilir. Bu tür durumlarda polyfill kullanmak gerekebilir.Class manipülasyonu ile erişilebilirlik (accessibility) arasında ilişki var mı?
Evet. Özellikle görünürlük kontrolü yapılan durumlarda, eklediğiniz/gizlediğiniz alanların ekran okuyucular tarafından algılanabilir olduğundan emin olun.
aria-hidden,role,tabindexgibi ek etiketlerle erişilebilirliği artırabilirsiniz.
Kaynak w3schools
Henüz yorum yapılmamış. İlk yorumu siz yapabilirsiniz!