Javascript ile css değiştirmek için aşağıdaki yöntemleri kullanabilirsiniz. Ancak bu yöntemlerden en kullanışlısı bir class eklemektir. Eklediğiniz bu class öğenin css özlliklerini en az javascript ile değiştirecektir. Aşağıdaki yöntemleri başlıklar altından daha detaylıca inceleyebilirsiniz.
document.querySelector('.zfc').style.color='red';document.querySelector('.zfc').setAttribute('style','color:red;');document.querySelector('.zfc').classList.add('zfc-css');
Yukarıdaki yöntemlerden sadece classList.add tek başına çalışmayacaktır. Ek bir css kodu gerektirecektir. En kullanışlı yöntem de bu diyebiliriz. Başlıkları inceleyerek örneklerle daha rahat görebilirsiniz.
Style Kullanarak Javascript ile Css Değiştirme
Style özelliğini kullanarak seçtiğiniz html öğresine her seferinde 1 css özelliği atayabilirsiniz. Ancak bu özellikte dikkat etmeniz gereken nokta iki kelimelik css özellikleridir. Örneğin normal bir css yazarken background-color:red; şeklinde css yazarken bu özelliği kullanacaksak style.backgroundColor='red'; şeklinde yazmalıyız.
<div class="zfc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia vel dolor maxime voluptas in porro sint. Itaque illo, repellat nam ipsum adipisci, nihil eum expedita corrupti quam esse, eveniet temporibus!</div>
.zfc{
padding:10px;
}document.querySelector('.zfc').style.color='red';Yukarıdaki kod bloğunda da gördüğünüz gibi tek bir css özelliği atamak bu yöntemle gayet basit. Normal bir css veriyormuşsunuz gibi css özelliği ekliyorsunuz. Bu yöntem daha çok sadece bir css verilmesi gereken durumlarda kullanılıyor. Daha fazla css vereceğinizde çok daha basit ve kullanışlı yöntemler kullanmanızı tavsiye ediyorum. Bir sorunu ne kadar az kod yazarak çözerseniz siteniz o kadar hızlı olacaktır. Ben bu özelliği genelde menü açıldığında scroll barın gizlenmesi için kullanıyorum. Bunun nedeniyse document.querySelector ile uzun uzun css yazmaya gerek kalmıyor. document.body.style.display='block' şeklinde istediğiniz css özelliğini verebiliyorsunuz.
setAttribute kullanarak Javascript ile Css Değiştirme
Direk html öğesinin kendine verilen css kodları tüm css kodlarını ezeceğinden bu yöntem çalışması daha garanti olan bir yöntemdir. Bu yöntem temel olarak html öğelerine istediğiniz herhangi bir özelliği atıyor. Örneğin document.createElement('img'); ile oluşturulmuş resimin src özelliğini ayarlarken nasıl setAttribute kullanıyorsak css özelliğini ayarlarken de setAttribute kullanıyoruz. Bu özelliğin bir diğer avantajı ise css kodlarının isimlerini diğer yöntemde olduğu gibi araştırmanızın gerekmemesidir. Normalde css kodlarını nasıl yazıyorsanız bu yöntemle de o şekilde yazabilirsiniz.
<div class="zfc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia vel dolor maxime voluptas in porro sint. Itaque illo, repellat nam ipsum adipisci, nihil eum expedita corrupti quam esse, eveniet temporibus!</div>
.zfc{
padding:10px;
}document.querySelector('.zfc').setAttribute('style','color:red;fonts-size:25px;line-height:32px;');Yukarıdaki örnekte de gördüğünüz şeklitle bu yöntem birden çok css kodunu diğer kodlardan baskın bir şekilde javascript ile çalıştırmamıza olanak sağlıyor. Diğer yöntemdeki fazla javascript kodu yazma sorununu bu yöntem ile çözmüş oluyoruz. Sağ tık incele yapıldığında html öğesinin style özelliğinin verdiğiniz css olduğu görülebilir.
classList kullanarak Javascript ile Css Değiştirme
Bu yöntem daha çok animasyon yapmak isteyenler için kullanması avantajlı bir yöntemdir. Sadece animasyon değil tüm css işleriniz için kullanabilirsiniz. Animasyon tarafında öne çıkmasının sebebi normalde keyframe ile yapılması gereken animasyonların transition ile yapılmasına olanak sağlamasıdır. Javascript ile css değiştirme konusunda en basit ve az kod ile yapılan yöntemdir. Temelde css dosyasında bir class oluşturulup event olarak bu clasın html öğesine eklenmesini kapsar. Aşağıdaki örnekten detaylıca inceleyebilirsiniz.
<div class="zfc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia vel dolor maxime voluptas in porro sint. Itaque illo, repellat nam ipsum adipisci, nihil eum expedita corrupti quam esse, eveniet temporibus!</div>
.zfc-css{
color:blue;
padding:10px;
font-size:20px;
line-height:28px;
transition:.4s;
}var zfc = document.querySelector('.zfc');
zfc.addEventListener('click',()=>{
zfc.classList.add('zfc-css');
});Yukarıdaki uygulamada yaptığımız tek şey yazının üstüne tıklandığında yazıya bir class eklemektir. Javascript kodları o onda yüklenmiş tüm öğeleri seçip ona göre çalışmaktadır. Bu sebeple script linkleri html iskeletinin en altına koyulur. Ancak css kodları her an geçerlidir. Yeni bir öğe de eklense css kodları çalışacaktır.
Sonuç
Sonuç olarak vermiş olduğum 3 özelliğin de kullanılması ve kullanılmaması gereken durumlar olacaktır. Sorununuzun çözümüne en uygun yöntemi siz belirlemelisiniz. Css baskın mı olacak pasif mi? Bir tane css mi verilecek yoksa birden çok mu? Gibi soruları kendinize sorarak uygun başlıktaki yöntemi kullanabilirsiniz. setAttribute ve classList.add ile verdiğiniz css kodlarını sonradan ulaşıp silebilirsiniz. Ancak style ile direk vermiş olduğunuz css kodlarını tekrar style ile değiştirmelisiniz. Bu yöntemlerden en kullanışlısının classList.add olduğunu söylemiştim. Bunu söylememin sebebi bu yöntemin bizi birçok ek css ve javascript kodundan kurtarmasıdır. İstediğiniz zaman bu clasa ulaşıp silebilirsiniz. Bu yöntemi kullanarak eklediğiniz css kodlarının animasyonlu gelmesi için tek yapmanız gereken eski class için bir css kodu daha yazmak. transition:.4s şeklinde verdiğiniz bir css koduyla artık yeni class için tanımlanmış tüm css kodları animasyonlu bir şekilde gelecektir. Daha sonraki yazılarda bu konuya da mutlaka değineceğiz.