Как получить высоту и ширину документа без использования jquery

112

Как получить высоту и ширину документа в чистом виде Javascript т.е. без использования JQuery.
Я знаю об $(document).height()и $(document).width(), но хочу сделать это вJavascript.

Я имел в виду высоту и ширину страницы.

javascript

— Сарита
источник

james.padolsey.com/javascript/get-document-height-cross-browser

— Клемен Тушар

119

var height = document.body.clientHeight;
var width = document.body.clientWidth;

Проверьте: эта статья для лучшего объяснения.

— Damb
источник

9

Это не кроссбраузер. Вы должны были протестировать это перед публикацией.

12

@Iwazaru Спасибо, что указали на это. Похоже, этот ответ 4-летней давности не является пуленепробиваемым :)

— Дамб,

2

Вроде кроссбраузерность .

— MAChitgarha

Если у веб-сайта есть граница, она снимает ее с ширины с помощью этого решения, но не решения jQuery. Вряд ли граница на теле, но стоит знать. window.innerWidthрешает это

— BritishSam

Это возвращает высоту окна браузера (если вы отрегулируете высоту браузера, которую он изменит), а не высоту содержимого / веб-страницы.

— Радмация

56

Даже последний пример, приведенный на http://www.howtocreate.co.uk/tutorials/javascript/browserwindow , не работает в режиме Quirks. Легче найти, чем я думал, похоже, это решение (извлеченное из последнего кода jquery):

Math.max(
    document.documentElement["clientWidth"],
    document.body["scrollWidth"],
    document.documentElement["scrollWidth"],
    document.body["offsetWidth"],
    document.documentElement["offsetWidth"]
);

просто замените Width на "Height", чтобы получить высоту.

— Дэн
источник

1

Это должен быть правильный ответ. clientWidth не всегда имеет правильное значение.

— Wildhammer

проблема с clientWidth в том, что он доступен только для просмотра. scrollWidth включает вещи, выходящие за пределы экрана. по крайней мере, это верно для моих экспериментов с Chrome в 2019 году.

— StayCool

@StayCool кажется, что последний jQuery все еще использует этот метод для расчета высоты / ширины документа и дает тот же результат, что и $(document).width(). Возможно, вам нужно что-то вроде того, $(window).width()что в чистом JS было бы просто document.documentElement["clientWidth"]в современных браузерах.

— Дэн

38

Это кросс-браузерное решение:

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

— Гамид
источник

Это безопасный и точный

— Нань Чжоу

1

это возвращает высоту и ширину окна, а не высоту и ширину документа

— Майкл

25

Вы должны использовать, getBoundingClientRectпоскольку он обычно работает, кросс-браузер и дает вам субпиксельную точность на прямоугольнике границ.

elem.getBoundingClientRect()

— Эрик Айгнер
источник

1

для тех, кто интересуется поддержкой: caniuse.com/#feat=getboundingclientrect

— Майк Глисон-младший Кутюрье

это возвращает высоту 0, когда я использовал его в document.body

— Майкл

Вероятно, потому что ваше тело имеет нулевой рост. Если вы не измените тип его отображения, это будет по умолчанию. Проверьте это в инспекторе DOM.

— Эрик Айгнер

11

Получить размер документа без jQuery

document.documentElement.clientWidth
document.documentElement.clientHeight

И используйте это, если вам нужен размер экрана

screen.width
screen.height

— тамасвиктор
источник

8

Вы также можете попробовать:

document.body.offsetHeight
document.body.offsetWidth

— Михай Френтиу
источник

1

Будьте осторожны, используя их в таких вещах, как события изменения размера окна. они должны рассчитать высоту и ширину, что требует времени.

— Miles

8

Это должно работать для всех браузеров / устройств:

function getActualWidth()
{
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||
                      document.body.offsetWidth;

    return actualWidth;
}

— user937284
источник

window.innerWidth - единственный, который также верен, когда инструменты разработчика открыты в Chrome

— Алекс

4

Если вы хотите получить всю ширину страницы, включая переполнение, используйте document.body.scrollWidth.

— Арлен Бейлер
источник

Это кроссбраузерное решение?

— обратный звонок

1

Как очень легко узнать ширину и высоту документа?

в HTML
<span id="hidden_placer" style="position:absolute;right:0;bottom:0;visibility:hidden;"></span>

в javascript

     var c=document.querySelector('#hidden_placer');

     var r=c.getBoundingClientRect();
     r.right=document width
     r.bottom=document height`

Вы можете обновлять это при каждом событии изменения размера окна, если необходимо.

— Джоши Фрэнсис
источник

0

windowэто окно всего приложения браузера. documentПоказанная веб-страница действительно загружена.

window.innerWidthи window.innerHeightбудет учитывать полосы прокрутки, что может быть не тем, что вам нужно.

document.documentElement- это полная веб-страница без верхней полосы прокрутки. document.documentElement.clientWidthвозвращает размер ширины документа без полосы прокрутки y. document.documentElement.clientHeightвозвращает размер документа по высоте без полосы прокрутки x.

— user3798451
источник