Ako získam skutočnú šírku a výšku prvku HTML?

Predpokladajme, že mám <div>, ktorý chcem vycentrovať v zobrazení prehliadača (viewport). Na to potrebujem vypočítať šírku a výšku prvku <div>.

Čo mám použiť? Uveďte prosím informácie o kompatibilite s prehliadačmi.

Zach Lysobey
Edited question 17 jún 2016 в 5:52
Programovanie
xhtml javascript html dhtml
16 november 2008 в 7:15
40 zobrazenia
Riešenie

Mali by ste použiť vlastnosti .offsetWidth a .offsetHeight. Všimnite si, že patria prvku, nie .style.

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

Komentáre (11)

POZNÁMKA: táto odpoveď bola napísaná v roku 2008. V tom čase bolo pre väčšinu ľudí naozaj najlepším riešením pre rôzne prehliadače použitie jQuery. Odpoveď tu nechávam pre potomkov a ak používate jQuery, je to dobrý spôsob, ako to urobiť. Ak'používate nejaký iný framework alebo čistý JavaScript, je pravdepodobne správna akceptovaná odpoveď.

Od verzie jQuery 1.2.6 môžete použiť jednu zo základných funkcií CSS, height a width (prípadne outerHeight a outerWidth).

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

var docHeight = $(document).height();
var docWidth = $(document).width();
tvanfosson
Edited answer 22 január 2016 в 5:03
Komentáre (0)

element.offsetWidth a element.offsetHeight by mali stačiť, ako bolo navrhnuté v predchádzajúcom príspevku.

Ak však chcete len vycentrovať obsah, existuje lepší spôsob. Za predpokladu, že používate xhtml strict DOCTYPE. nastavte tagu body vlastnosť margin:0,auto a požadovanú šírku v px. Obsah sa zarovná na stred stránky.

Komentáre (1)