JavaScript ile Width ve Height Değerlerini Almak

JavaScript ile Width ve Height Değerlerini Almak

Merhaba. Bu yazıda sizlere JavaScript ile Width ve Height Değerlerini Almak ile ilgili bazı bilgiler sunacağım. Bir önceki js bilgi yazısından sonra seriye devam edelim.

JavaScript ile Width ve Height Değerlerini Almak

Klasik Yöntem ve JavaScript

Klasik yöntemde javascript ile bir elementin width ya da height değerini almanın yolunun *.style.width ya da *.style.height olduğu düşünülüyor. Aslında pek yanlış değil. Çünkü settable bir attribute aynı zamanda gettable olarak da JavaScript ile çalışmakta. Fakat tarayıcı tarafında yaşanan bazı sıkıntılardan kaynaklı olduğundan sanırım tüm data load olmamış ise istenen değerin yakalanma şansı da olmuyor. Gelin şöyle bir örnekle açıklayalım.

Bu şekilde bir inputa pixel türünden değer verdiğinizi düşünelim. Çünkü ne yaparsanız yapın yüzdesel verdiğiniz değer size pixel cinsinden dönecektir. İşimizi basitleştirmek adına böyle yapalım. Ardından bu elementi select edip style içinde yer alan width attribute değerini alalım yani almaya çalışalım.

Evet boş bir değer döndüğünü görüyoruz. Oysa ki orada bir değer var. Yeni bir değer set ederseniz de değişim olacak. Örneğin 100% cinsinden bir genişliği 50% cinsine çevirirsek input genişliği azalacak. Ve tekrar width değerini almak istersek bu sefer 50% değerini göreceğiz.

Çare ComputedStyle

Eğer bu yöntem işe yaramıyor ise bir şekilde işinizi bozuyor ise computedStyle ile istediğinizi elde edebilirsiniz. Yukarıda yakaladığımız title isimli html elementi üzerinden gidelim.

Evet bu sefer istediğimiz değeri aldık. Ancak bir sorun daha var. Buradan dönen değer bir css property olarak dönüyor. Yani siz orada 100em, 100vh yazıyorsanız o değer dönecektir. Siz bu değeri pixel değil de yüzde türünden döndürmek isterseniz yapacağınız işlem aslında basit. Alınan değeri 100’e bölüp 10 ile çarpacaksınız. Örnek:

Değeri aldıktan sonra yapacağınız işlem şöyle olacak:

Tabi burada da 100 değerinden daha büyük sonuçlar ortaya çıkabilir. Ancak basit anlamda yüzde değerini de bu şekilde elde edebiliyoruz.

Soru ve görüşleriniz için [email protected] adresine mail atabilirsiniz.

C# ile ODBC Ayarlarını Yapma
Up Next:

C# ile ODBC Ayarlarını Yapma

C# ile ODBC Ayarlarını Yapma