Μέγεθος του jQuery

Με το jQuery, είναι εύκολο να χειρίζεστε το μέγεθος των στοιχείων και του παραθύρου περιήγησης.

Μέθοδοι μεγέθους του jQuery

Το jQuery παρέχει πολλές σημαντικές μεθόδους για τη διαχείριση του μεγέθους των στοιχείων:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

Οι μεθόδους width() και height() του jQuery

Η μέθοδος width() ρυθμίζει ή επιστρέφει το πλάτος του στοιχείου (χωρίς τα εσωτερικά περιθώρια, τα πλαίσια ή τα εξωτερικά περιθώρια).

Η μέθοδος height() ρυθμίζει ή επιστρέφει το ύψος του στοιχείου (χωρίς τα εσωτερικά περιθώρια, τα πλαίσια ή τα εξωτερικά περιθώρια).

Το παρακάτω παράδειγμα επιστρέφει το πλάτος και το ύψος του καθορισμένου στοιχείου <div>:

Παράδειγμα

$("button").click(function(){
  var txt="";
  txt += "Πλάτος: " + $("#div1").width() + "</br>";
  txt += "Ύψος: " + $("#div1").height();
  $("#div1").html(txt);
});

Προσπαθήστε το個人τικά

Οι μεθόδους innerWidth() και innerHeight() του jQuery

Η μέθοδος innerWidth() επιστρέφει το πλάτος του στοιχείου (συμπεριλαμβανομένων των εσωτερικών περιθωρίων).

Η μέθοδος innerHeight() επιστρέφει το ύψος του στοιχείου (συμπεριλαμβανομένων των εσωτερικών περιθωρίων).

Το παρακάτω παράδειγμα επιστρέφει το καθορισμένο πλάτος και ύψος του στοιχείου <div>:

Παράδειγμα

$("button").click(function(){
  var txt="";
  txt += "Εσωτερικό πλάτος: " + $("#div1").innerWidth() + "</br>";
  txt += "Εσωτερικό ύψος: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

Προσπαθήστε το個人τικά

Μέθοδοι jQuery outerWidth() και outerHeight()

Η μέθοδος outerWidth() επιστρέφει το πλάτος του στοιχείου (περιλαμβάνει το εσωτερικό περιθώριο και τα πλαίσια).

Η μέθοδος outerHeight() επιστρέφει το ύψος του στοιχείου (περιλαμβάνει το εσωτερικό περιθώριο και τα πλαίσια).

Το παρακάτω παράδειγμα επιστρέφει το outer-width/height του καθορισμένου στοιχείου <div>:

Παράδειγμα

$("button").click(function(){
  var txt="";
  txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
  txt+="Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

Προσπαθήστε το個人τικά

Η μέθοδος outerWidth(true) επιστρέφει το πλάτος του στοιχείου (περιλαμβάνει το εσωτερικό περιθώριο, τα πλαίσια και το περιθώριο).

Η μέθοδος outerHeight(true) επιστρέφει το ύψος του στοιχείου (περιλαμβάνει το εσωτερικό περιθώριο, τα πλαίσια και το περιθώριο).

Παράδειγμα

$("button").click(function(){
  var txt="";
  txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
  txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
});

Προσπαθήστε το個人τικά

jQuery - Περισσότερα width() και height()

Το παρακάτω παράδειγμα επιστρέφει το πλάτος και το ύψος του έγγραφου (HTML έγγραφου) και του παραθύρου (περιθώριο περιηγητή):

Παράδειγμα

$("button").click(function(){
  var txt="";
  txt+="Document width/height: " + $(document).width();
  txt+="x" + $(document).height() + "\n";
  txt+="Window width/height: " + $(window).width();
  txt+="x" + $(window).height();
  alert(txt);
});

Προσπαθήστε το個人τικά

Το παρακάτω παράδειγμα ρυθμίζει το πλάτος και το ύψος του καθορισμένου στοιχείου <div>:

Παράδειγμα

$("button").click(function(){
  $("#div1").width(500).height(500);
});

Προσπαθήστε το個人τικά

Εγχειρίδιο αναφοράς jQuery CSS

Για πλήρη αναφορά στο jQuery Dimensions, επισκεφθείτε το χειροκίνητο μας εγχειρίδιο μέτρων jQuery.