jQuery obyekt ölçüləri

jQuery bizə html elementin ölçüləri haqqında məlumat verə bilər və ya ölçülərini dəyişdirə bilər. 

İstifadə edilən funksiyalar:

- width() - obyektin genişliyini bildirir, dəyişdirir.
- height() - obyektin yüksəkliyini bildirir, dəyişdirir.
- innerWidth() - obyektin padding (iç boşluq) də daxil olmaqla genişliyini bildirir, dəyişdirir
- innerHeight() - obyektin padding (iç boşluq) də daxil olmaqla yüksəkliyini bildirir, dəyişdirir.
- outerWidth() - obyektin padding (iç boşluq) və border (kənarlıq) də daxil olmaqla genişliyini bildirir, dəyişdirir.
- outerHeight() - obyektin padding (iç boşluq) və border (kənarlıq) də daxil olmaqla yüksəkliyini bildirir, dəyişdirir.
- outerWidth(true) - obyektin padding (iç boşluq), border (kənarlıq) və margin (çöl boşluq) daxil olmaqla genişliyini bildirir, dəyişdirir.
- outerHeight(true) - obyektin padding (iç boşluq), border (kənarlıq) və margin (çöl boşluq) daxil olmaqla yüksəkliyini bildirir, dəyişdirir.
 

jQuery obyekt ölçüləri

 
İndi bir div elementi hazırlayıb, düyməyə basılan zaman ölçüləri barədə məlumatlar verilməsini təmin edən kod yazaq:
<div id="txt" style="border: 1px #000000 solid; margin: 3px; padding: 5px; width: 320px; height: 140px;"></div>
<button id="btn">Obyekt ölçülərini göstər</button>
<script>
$("#btn").click(function(){
   var txt = "";
   txt += "Genişlik: " + $("#txt").width() + "<br/>";
   txt += "Yüksəklik: " + $("#txt").height() + "<br/>";
   txt += "İç boşluqla genişliyi: " + $("#txt").innerWidth() + "<br/>";
   txt += "İç boşluqla yüksəkliyi: " + $("#txt").innerHeight() + "<br/>";
   txt += "Kənarlıq, iç boşluqla genişliyi: " + $("#txt").outerWidth() + "<br/>";
   txt += "Kənarlıq, iç boşluqla yüksəkliyi: " + $("#txt").outerHeight() + "<br/>";
   txt += "Çöl boşluq, kənarlıq, iç boşluqla genişliyi: " + $("#txt").outerWidth(true) + "<br/>";
   txt += "Çöl boşluq, kənarlıq, iç boşluqla yüksəkliyi: " + $("#txt").outerHeight(true) + "<br/>";
   $("#txt").html(txt);
 }); 
</script>
Nəticəni görmək üçün klikləyin
 
Bu funksiyalar sadəcə məlumat vermir. Eyni zamanda ölçüləri dəyişdirməyə də yarayır. Məsələn; $("#txt").width(500); kodu, id="txt" olan elementin ölçüsünü 500 piksel edəcəkdir.
<div id="txt" style="border: 1px #000000 solid; margin: 3px; padding: 5px; width: 320px; height: 140px;"></div>
<button id="btn">Obyekti genişlət</button>
<script>
$("#btn").click(function(){
   $("#txt").width(500);
 }); 
</script>
Nəticəni görmək üçün klikləyin
jQuery