Bu yazımızda Jquery de 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,
|
1 2 3 |
$("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,
|
1 2 3 |
$("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.
Örneğimizde 2 adet 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.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
, height(), innerWidth(), innerHeight(), outerWidth(), outerHeight() Kullanımı){kind=link}