Javascript attribute kullanımı

sezaialkan
Sezai Alkan Frontend Developer

Javascript attribute kullanımında bir nesneye yeni özellikler ekleyebilir, silebilir veya kontrol edebiliriz. Yeni bir özellik ekleme istiyor isek setAttribute(), özellik silmek istiyor isek removeAttribute(), değer elde etmek istiyor isek getAttribute(), özelliğin varlığını kontrol etmek istiyor isek hasAttribute() method kullanımları sağlayabilmekteyiz.

İlk olarak bir nesneye bir özellik eklemek istediğimizde kullanmamız gereken setAttribute() methodu özellik ekleyebiliriz.

<a id="baglanti">kodhocasi.com</a>
var e = document.getElementById("baglanti");
e.setAttribute("href","https://www.kodhocasi.com");

Yukarıdaki örneğin uygulama sonrası a etikenin son hali aşağıdaki gibidir.

Javascript attribute kullanımı

Bu örnek daha fazlada geliştirilebilmektedir. Bir checbox a checked veya bir butona disabled gibi özelliklerde eklenebilmektedir.

Eğer nesne üzerinden bir özelliği silmek istiyor ise removeAttribute() methodu kullanımı sağlanabilmektedir.

<input type="checkbox" id="sec" checked="">
<label>Seç Beni</label>

Yukarıdaki örnekte checbox ilk ekrana yansıdığında seçili bir hale olacaktır.

Javascript attribute kullanımı
var e = document.getElementById("sec");
e.removeAttribute("checked","");

Daha sonra yukarıdaki satırlar ile checbox üzerindeki checked özelliğini kaldırmış oluyoruz böylece elemanımız sanki seçilmemiş gibi ekrana yansıyacaktır.

Javascript attribute kullanımı

Nesne üzerinde bir özelliğin varlığını kontrol etmek istiyor isek hasAttribute() methodu ile kontrol işlemi sağlayabiliriz. Eğer nesne üzerinde değer mevcut ise bize true değerini döndürecektir.

var e = document.getElementById("tikla");

if (e.hasAttribute("disabled")) {
 alert("Dokunulmazlığı var");
}else{
 alert("Dokunabilirsin");
}

Yukarıdaki örnekte ilk olarak butonumuza disabled özelliği ile tıklama özelliğini pasif etmekteyiz. Böylece buton işlevini yitirmektedir. Eğer buton elemanı üzerinde disabled özelliği bulunuyor ise bize true değerini geri döndürecektir ve sonucunda alert ile ekrana Dokunulmazlığı var diye uyarı verecektir.

Nesne üzerinden bir özelliğin değerine ulaşmak istiyor isek getAttribute() methodunu kullanabiliriz.

<div class="container" id="foklarYasamali"></div>
var e = document.querySelector(".container");
alert(e.getAttribute("class"));

Yukarıdaki son örneğimizde ise getAttribute() methodu ile div imizin id özelliğinin değerini elde edebilmekteyiz. sayfa çalışması durumunda kullanıcıya foklarYasamali diye id özelliğinin değerini verecektir.

Yorumlar

Yorum Yapabilmek İçin Giriş Yapmalısınız.
İlk Yorum Yapan Sen Ol!
Uçur Beni Kahramanım Yukarı Çık
Bu web sitesi çerezleri kullanıyor. Devam ederek çerez kullanımını kabul etmiş oluyorsunuz. Detay

Devam Etmek İçin Giriş Yapın

Kod Hocası İle Paylaşımda bulunabilir, Kendini geliştirebilirsin. Sende Hemen Giriş Yap Aramıza Katıl.

GirişKayıt Ol