JavaScript'te Etiket Özellikleri Olarak Nitelikler
Şimdi etiket niteliklerini nasıl alacağımızı öğrenelim. Burada şu kural geçerlidir: Bir etiketin her niteliği, DOM öğesinde aynı ada sahip bir özelliğe karşılık gelir.
Bir örnek üzerinden inceleyelim. Elimizde şu etiket olduğunu varsayalım:
html<input id="elem" type="text">
Öğemize bir referansı değişkene alalım:
javascriptlet elem = document.querySelector('#elem');
İhtiyacımız olan niteliklerin değerlerini yazdıralım:
javascriptconsole.log(elem.id); // 'elem' yazdırır
console.log(elem.type); // 'text' yazdırır
Şimdi örnek olarak niteliğin değerini değiştirelim:
javascriptelem.type = 'submit';
Aşağıdaki input verilmiştir:
html<input id="elem" type="email">
Ayrıca bir buton verilmiştir. Butona tıklandığında, yukarıda belirtilen inputun
type niteliğinin içeriğini ekrana yazdırın.
Aşağıdaki input verilmiştir:
html<input id="elem" type="email">
Ayrıca bir buton verilmiştir. Butona tıklandığında,
type niteliğine submit değerini yazın.
a etiketi şeklinde bir bağlantınız,
bir butonunuz ve bir paragrafınız olduğunu varsayalım. Butona tıklandığında,
bağlantının href niteliğinin içeriğini paragrafa yazdırın.
Bir bağlantınız ve bir butonunuz olduğunu varsayalım. Butona tıklandığında,
bağlantı metninin sonuna, href niteliğinin içeriğini yuvarlak
parantez içinde ekleyin.
Bir resminiz olduğunu varsayalım. Onu img
etiketi kullanarak sayfaya yerleştirin. Ayrıca bir buton ve bir paragraf verilmiştir.
Butona tıklandığında, paragrafa resmin src niteliğinden gelen yolun yazılmasını sağlayın.
img etiketinde bir resim ve bir buton verilmiştir.
Butona tıklandığında, width
niteliğine 300 değerini yazın.
img etiketinde bir resim ve bir buton verilmiştir.
width niteliğinde belirli bir genişlik ayarlandığını varsayalım.
Tıklandığında resim genişliğini 2 katına çıkaran bir buton yapın.
İki resminiz olduğunu varsayalım. Sayfada bir img etiketi ve iki buton oluşturun.
İlk butona tıklandığında src niteliğine ilk resmin yolunu yazın,
ikinci butona tıklandığında ise ikinci resmin yolunu yazın.