Javascript ile Css Stil Özelliklerini Değiştirme
ÇÇÇ
Javascript ile Css Stil Özelliklerini Değiştirme
Javascript ile Css Stil Özelliklerini Değiştirme ve nasıl uygulanacağını öğreneceğiz.
CSS, HTML etiketlerine stil vermek için kullanılan bir dildir. Örneğin, bir <p> etiketi için font rengini “siyah” olarak ayarlayabilirsiniz. Ancak JavaScript ile CSS stil özelliklerini değiştirerek, web sayfanızın davranışını ve görünümünü dinamik hale getirebilirsiniz.
JavaScript ile CSS stil özelliklerini değiştirmek için iki yol vardır. HTML etiketlerine direk erişmek veya sınıf adlarını kullanarak erişmek.
HTML etiketlerine direk erişmek için, DOM (Document Object Model) kullanılır. DOM, web sayfanızdaki tüm HTML etiketlerini bir ağaç yapısına dönüştürür ve JavaScript ile bu ağaç yapısına erişebilirsiniz. Örneğin, bir <p> etiketi için font rengini “siyah” olarak değiştirmek için aşağıdaki kodu kullanabilirsiniz:
document.getElementById("myParagraph").style.color = "black";
Ancak, HTML etiketlerine direk erişmek sıklıkla tavsiye edilmez. Çünkü bu yöntem sadece tek bir etiketi değiştirir ve kodunuzun ölçeklenebilirliği azaltır. Bunun yerine, sınıf adlarını kullanarak CSS stil özelliklerini değiştirmek daha iyi bir seçimdir. Örneğin, tüm <p> etiketleri için font rengini “siyah” olarak değiştirmek için aşağıdaki kodu kullanabilirsiniz:
document.getElementsByClassName("myClass").style.color = "black";
JavaScript ile CSS stil özelliklerini değiştirmek, web sayfanızın davranışını ve görünümünü dinamik hale getirmenizi sağlar. Örneğin,formun arka plan rengini yeşil olarak değiştirebilirsiniz. Aynı şekilde, bir butona tıklandığında, bir resmin boyutunu değiştirebilirsiniz. Bu özellikler, web sayfanızın interaktif ve kullanıcı dostu olmasını sağlar.
JavaScript ile CSS stil özelliklerini değiştirirken dikkat etmeniz gereken bir diğer nokta, tarayıcı uyumluluğudur. Tarayıcılar arasında bazı farklılıklar olabilir ve bazı özellikler tarayıcılar tarafından desteklenmeyebilir. Bu nedenle, JavaScript ile CSS stil özelliklerini değiştirirken tarayıcı uyumluluğunu dikkate almalısınız.
Örnek olarak, bir web sayfasında kullanıcının mouse ile üzerine gelmesi ile divin arka plan rengi değişebilir.
var el = document.getElementById("myDiv");
el.onmouseover = function() {
el.style.backgroundColor = "red";
}
el.onmouseout = function() {
el.style.backgroundColor = "white";
}
örnekte kullanıcı mouse’unu divin üzerine getirdiğinde arka plan rengi kırmızı, mouse’u divin dışına çektiğinde ise arka plan rengi beyaz olarak değişir.
JavaScript ile CSS stil özelliklerini değiştirmek, sayfanızın davranışını ve görünümünü dinamik hale getirmenizi sağlar. Ancak, tarayıcı uyumluluğunu dikkate almalı ve sınıf adlarını kullanarak CSS stil özelliklerini değiştirmek daha iyi bir seçim olacaktır.
- Codecademy: https://www.codecademy.com/
- W3Schools: https://www.w3schools.com/
- FreeCodeCamp: https://www.freecodecamp.org/
- Udemy: https://www.udemy.com/