JavaScript ile Html Etiketlerinin Css Stil Özelliklerini Değiştirme
JavaScript kullanarak sayfamızdaki html elemanlarına Css stilleri uygulayabiliriz.
Örnek:
document.getElementById("yazi").style.color ="red";
Yukarıdaki örnekte yazi id’li html elemanının metin rengi kırmızı yapılmıştır.
Örnekler daha da çoğaltılabilir:
document.getElementById("yazi").style.border ="1px solid red";
document.getElementById("yazi").style.width ="200px";
JavaScript ile Html Etiketlerine Css Class Uygulama
Html etiketlerine stil uygulayabildiğimiz gibi, css class da uygulayabiliriz.
Örnek:
document.getElementById("elemanId ").className=”stilAdi”;
Css ile bir html elemanına birden fazla class uygulanabilmekte. Zaten class uygulanmış bir html etiketine Javascript ile yeni class’lar da uygulamak istersek, şu şekilde yapabiliriz.
document.getElementById("elemanId ").className += " yeniClassAdi";
Bu yöntemi kullanırken yeni class isminden önce bir boşluk bırakmalıyız ki, etikete uygulanmış class isimleri birleşmesin.
JavaScript ile Html Etiketlerinin Özelliklerini (Parametre Değerlerini) Değiştirme
Html etiketlerinin parametre değerlerine JavaScript ile ulaşabilir ve istersek değiştirebiliriz.
Parametre değerini elde etmek için getAttribute metodu;
document.getElementById("elemanId").getAttribute("parametreAdi");
Parametre değerini değiştirmek içinse setAttribute metodu kullanılır:
document.getElementById("elemanId").setAttribute("parametreAdi", "yeniDeger");
Örneğin id’si tablom olan bir tablonun genişliğini JavaScript ile değiştirelim:
document.getElementById("tablom").setAttribute("width", "500");
A etiketinin href özelliğini değiştirelim:
document.getElementById("link1").setAttribute("href", "http://www.btdersleri.com");
Konu örneklerini inceleyiniz.
javascript html elemanlarına stil uygulama, html etiketlerine css class uygulama, html etiketlerinin parametre değerlerini değiştirme
KONU İLE İLGİLİ ÖRNEKLER
|
JavaScript Html Etiketine Css Class Uygulama 2
|
Kendin Dene
|
Kendin Dene butonuna tıklayarak örneğin kodlarını görebilir, değiştirebilir ve sonucu görebilirsin.
|
JavaScript Html Etiketine Css Class Uygulama
|
Kendin Dene
|
Kendin Dene butonuna tıklayarak örneğin kodlarını görebilir, değiştirebilir ve sonucu görebilirsin.
|
JavaScript ile nesnelerin stil özelliklerini değiştirme
|
Kendin Dene
|
Kendin Dene butonuna tıkla, kodları incele, değiştir, sonucu gör...
|
JavaScript ile Html Etiketlerinin Parametre Özelliklerini Değiştirme
|
Kendin Dene
|
Kendin Dene butonuna tıklayarak örneğin kodlarını görebilir, değiştirebilir ve sonucu görebilirsin.
28111 kez okundu.