Html sayfaları üzerinde işlem yaparken, elemetlerin ( tag, etiket ) sınıflarını değiştirmek isteyebiliriz. Bunun nedeni yapılan işlem sonrasındaki farklı durumun belirginleşmesi olabilir. Mesela bir cevap girilirken gri, girildikten sonra eğer doğru ise yeşil ve eğer yanlış ise kırmızı renkte bir font kullanmak isteyebiliriz.
Bu gibi durumlarda Javascript ile elemente class ekleyerek elementin görünümüne müdehale edebiliriz. Css sınıfları etikenlerin sitil bilgilerini tutarlar ve bir elemente istediğimiz kadar sitil sınıfı ekleyebilir veya çıkartabiliriz. Buradaki istediğimiz kadar tabii ki sonsuz anlamında değil 🙂 .
Javascript DOM üzerindeki bir elemente ulaştığında o elementin sitil sınıflarını classList özelliğinde tutar. Bu özelliğin metodlarını kullanarak elemente yeni Css sınıfları ekleyebilir veya çıkarabiliriz. Şimdi bir örnek verelim.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.yesil {
color: green;
}
.kirmizi {
color: red;
}
</style>
<script>
const sinifEkle = () => {
const baslikDOM = document.getElementById("baslik");
baslikDOM.classList.add("yesil");
};
</script>
<title>Document</title>
</head>
<body>
<h1 id="baslik">Bir başlık</h1>
<button onClick="sinifEkle()">Rengi Değiştir</button>
</body>
</html>Yukarıdaki örneğimizi çalıştırdığımızda, Rengi Değiştir düğmesine tıklayarak yazı rengini yeşil yapabiliriz. Tek seferlik bir işlem olsa da işin mantığını anlatmaktadır.
Javascript classList.add İle Elemente Yeni Sınıf Ekleme
classList bir elementin sitil sınıflarını tutan bir nesnedir ve bu nesnenin add metodu ile elemente yeni sınıflar eklenebilir. add metodu parametre olarak eklenecek sitil sınıfının adını alır. Kaç adet css sınıfı eklenecek ise hepsi virgül ile ayrılarak aynı anda verilebilir. Kullanım şekli aşağıdaki gibidir.
element.classList.add("sinifAdı");
element.classList.add("sinifAdi1", "sinifAdi2", ... , "sinifAdiN");Javascript classList.toggle İle Elemente Sınıf Ekleyip Çıkarma
Eğer bir sınıf element sınıf listesi içerisinde yoksa, o sınıfı eklemek ve eğer varsa o sınıfı element class listesinden çıkarmak isteyebiliriz. Bu durumlarda toggle metodunu kullanıyoruz. classListe.toggle eğer verilen sınıf elemente varsa onu çıkarır, eğer yoksa onu ekler. Yukarıdaki örneği toggle ile tekrar yapalım.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.yesil {
color: green;
}
.kirmizi {
color: red;
}
</style>
<script>
const sinifEkle = () => {
const baslikDOM = document.getElementById("baslik");
baslikDOM.classList.togle("yesil");
};
</script>
<title>Document</title>
</head>
<body>
<h1 id="baslik">Bir başlık</h1>
<button onClick="sinifEkle()">Rengi Değiştir</button>
</body>
</html>Yukarıdaki örneği çalıştırdığımızda, bir önceki örnek ile aynı çalışacaktır. Tek farkı, butona her tıklandığında eğer yesil isimli class elemente yoksa ekleyecek ve eğer varsa çıkaracaktır. Bu da başlık renginin her tıklamada değişmesine neden olacaktır.
Javascript classList.replace İle Bir Elementin Sitil Sınıfını Değiştirme
Biz bir elemente sınıf ekleyebildiğimiz gibi sitil sınıflarını da değiştirebiliriz. Mesela yukarıdaki örneğimize bakarsa renk olarak yesil ve kirmizi sınıflarımız var. Örneğimizi başlatırken başlığa kirmizi class bilgisini atayıp, sonra butona tıklandığına onu yesil class bilgisi ile değiştirmek istersek kodlarımız aşağıdaki gibi olacaktır.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.yesil {
color: green;
}
.kirmizi {
color: red;
}
</style>
<script>
const sinifDegistir = () => {
const baslikDOM = document.getElementById("baslik");
baslikDOM.classList.replace("kirmizi", "yesil");
};
</script>
<title>Document</title>
</head>
<body>
<h1 id="baslik" class="kirmizi">Bir başlık</h1>
<button onClick="sinifDegistir()">Rengi Değiştir</button>
</body>
</html>element.classList.replace(“eskiSinif”, “yeniSinif”) şeklinde bir kullanıma sahiptir. eskiSinif olarak verilen css sitil sınıfı, yeniSinif olarak verilen css class bilgisi ile değiştirilecektir.
NOT : classList ile birlikte kullanılacak sınıf bilgilerinin daha önce hazırlanarak sayfaya eklenmesi gerekmektedir. Olmayan bir css sınıfı eğer bir elemente eklenirse hiç bir değişiklik olmayacaktır.
Sonuç
Eğer Html etiketlerinin sitil sınıflarını değiştirmek veya yenilerini eklemek istersek, add, replace ve toggle metodlarını kullanabiliriz.
Javascript ile Html etiketleri üzerinde en çok yaptığınız işlemler nelerdir?