Πώς μπορώ να ανακτήσω το πραγματικό πλάτος και ύψος ενός στοιχείου HTML;

Ας υποθέσουμε ότι έχω ένα <div> που θέλω να κεντράρω στην οθόνη του προγράμματος περιήγησης (viewport). Για να το κάνω αυτό, πρέπει να υπολογίσω το πλάτος και το ύψος του στοιχείου <div>.

Τι πρέπει να χρησιμοποιήσω; Παρακαλείστε να συμπεριλάβετε πληροφορίες σχετικά με τη συμβατότητα με το πρόγραμμα περιήγησης.

Zach Lysobey
Επεξεργασμένη ερώτηση Κάνε Ιούνιος 2016 в 5:52
Προγραμματισμός
xhtml javascript html dhtml
Κάνε Νοέμβριος 2008 в 7:15
25 προβολές
Λύση

Θα πρέπει να χρησιμοποιήσετε τις ιδιότητες .offsetWidth και .offsetHeight. Σημειώστε ότι ανήκουν στο στοιχείο και όχι στο .style.

var width = document.getElementById('foo').offsetWidth;

Σχόλια (11)

ΣΗΜΕΙΩΣΗ: αυτή η απάντηση γράφτηκε το 2008. Εκείνη την εποχή, η καλύτερη λύση για τους περισσότερους ήταν η χρήση της jQuery. Αφήνω την απάντηση εδώ για τις επόμενες γενιές και, αν χρησιμοποιείτε jQuery, αυτός είναι ένας καλός τρόπος για να το κάνετε. Αν χρησιμοποιείτε κάποιο άλλο πλαίσιο ή καθαρή JavaScript, η αποδεκτή απάντηση είναι μάλλον ο σωστός τρόπος.

Από την jQuery 1.2.6 μπορείτε να χρησιμοποιήσετε μία από τις βασικές CSS συναρτήσεις, height και width (ή outerHeight και outerWidth, ανάλογα με την περίπτωση).

var height = $("#myDiv").height();
var width = $("#myDiv").width();

var docHeight = $(document).height();
var docWidth = $(document).width();
tvanfosson
Επεξεργασμένη απάντηση Κάνε Ιανουάριος 2016 в 5:03
Σχόλια (0)

element.offsetWidth και element.offsetHeight θα πρέπει να κάνουν, όπως προτείνεται σε προηγούμενη δημοσίευση.

Ωστόσο, αν θέλετε απλώς να κεντράρετε το περιεχόμενο, υπάρχει ένας καλύτερος τρόπος για να το κάνετε. Υποθέτοντας ότι χρησιμοποιείτε xhtml strict DOCTYPE. ορίστε την ιδιότητα margin:0,auto και το απαιτούμενο πλάτος σε px στην ετικέτα body. Το περιεχόμενο θα ευθυγραμμιστεί στο κέντρο της σελίδας.

Σχόλια (1)