JQuery width(), height(), innerWidth(), innerHeight(), outerWidth(), outerHeight() Kullanımı

Merhaba Arkadaşlar,
Bu makalede width(), height(), innerWidth(), innerHeight(), outerWidth(), outerHeight() metodlarının ne işe yaradığını tek tek açıkladıktan sonra nasıl kullanabileceğimizi uygulamalı bir şekilde öğreneceğiz.

► width() metodu, seçtiğimiz html etiketinin genişlik değerini verir.Html etiketlerine, $(“div”).width(50);gibi parametre vererek genişlik 
değerleri verebiliriz.

► height() metodu, seçtiğimiz html etiketinin yükseklik değerini verir.Html etiketlerine,$(“div”).height(50); gibi parametre vererek yükseklik değerleri verebiliriz.

► innerWidth() metodu, seçtiğimiz html etiketinin genişlik değeri ile padding-left ve padding-right değerleri toplamını verir.

► innerHeight() metodu, seçtiğimiz html etiketinin yükseklik değeri ile padding-top ve padding-bottom değerleri toplamını verir.

► outerWidth() metodu, seçtiğimiz html etiketinin genişlik değeri ile padding-left, padding-right, border-left ve border-right değerleri toplamını verir.

► outerHeight() metodu, seçtiğimiz html etiketinin yükseklik değeri ile padding-top, padding-bottom, border-top ve border-bottom değerleri toplamını verir.

► outerWidth (true) metodu, seçtiğimiz html etiketinin genişlik değeri ile padding-left, padding-right, border-left, border-right, margin-left ve margin-right değerleri toplamını verir.

► outerHeight (true) metodu, seçtiğimiz html etiketinin yükseklik değeri ile padding-top, padding-bottom, border-top, border-bottom, margin-top ve margin-bottom değerleri toplamını verir.

► Eğer tarayıcımızın genişlik ve yükseklik değerlerini öğrenmek istersek $(document) veya $(window)olarak tanımlayabiliriz.

jquery-de-width-height-innerwidth-innerheight-outerwidth-outerheight-metodlari

Örneğimizde 2 <div> tanımlayalım ve margin, padding, border, width, height değerleri vererek metodlarımızı uygulayalım.Örneklerde css değerlerini dikkatlice incelerseniz daha anlaşılır olacaktır.Kodlarımız şu şekilde;

Yeni bir makalede görüşmek üzere.

Önceki : JQuery Dersleri 15 – css() Kullanımı

Sonraki : JQuery Dersleri 17 – parent(), parents(), parentsUntil(), children(), find() Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +