JavaScript ile Html Etiketlerinin Stil ve Parametre Özelliklerini Değiştirme

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.



YORUMLAR




16481  kez okundu.

Online Kullanıcı Sayısı 569