Как да получа действителната широчина и височина на HTML елемент'?

Да предположим, че имам <div>, който искам да центрирам в дисплея на браузъра (viewport). За да направя това, трябва да изчисля ширината и височината на елемента <div>.

Какво трябва да използвам? Моля, включете информация за съвместимостта с браузърите.

Zach Lysobey
Редактиран въпрос Направете юни 2016 в 5:52
Програмиране
xhtml javascript html dhtml
Направете ноември 2008 в 7:15
34 изгледи
Решение

Трябва да използвате свойствата .offsetWidth и .offsetHeight. Обърнете внимание, че те принадлежат на елемента, а не на .style.

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

Коментари (11)

ЗАБЕЛЕЖКА: този отговор е написан през 2008 г. По онова време най-доброто решение за повечето хора наистина беше да използват jQuery. Оставям отговора тук за потомство и ако използвате jQuery, това е добър начин да го направите. Ако използвате някаква друга рамка или чист JavaScript, приетият отговор вероятно е правилният начин.

От версия 1.2.6 на jQuery можете да използвате една от основните 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. задайте на тага body свойството margin:0,auto и изискваната ширина в px. Съдържанието се центрира спрямо страницата.

Коментари (1)