Как получить размер экрана, окна и веб-страницы в JavaScript

Различные размеры браузеров — одни из самых запутанных концепций в javaScript, и я объясню эти концепции в этой статье и покажу вам, как получить к ним доступ на конкретных примерах. Дорогие гости, выглядите хорошо 🍵

Экран

Размер экрана

Размер экрана — это ширина и высота экрана: монитора или мобильного. window.screen — это объект, который содержит информацию о размере экрана.

screen.width: Ширина экрана.
screen.height: высота экрана.

Доступные размеры экрана

Доступный размер экрана состоит из ширины и высоты активного экрана без панели инструментов ОС.

screen.availWidth: Доступная ширина, равная ширине экрана.
screen.availHeight: доступная высота, равная высоте экрана за вычетом верхней панели Mac или нижней панели Windows.

расстояние до экрана

screenTop: расстояние от верхнего левого угла окна браузера до верхнего края экрана.
screenLeft: расстояние от левого верхнего угла окна браузера до левого края экрана.

FirefoxБраузеры не поддерживают вышеуказанные свойства, но вы можете использовать 👇:

screenX: равно screenLeft.
screenY: равно screenTop.

приложение

chrome/Opera: Сохраняет расстояние верхнего левого угла окна браузера относительно экрана.

когда полный экран四个值оба 0

Firefox/Safari: Сохраняет расстояние верхнего левого угла окна браузера относительно экрана.

Когда окно браузера полноэкранное, это относится к расстоянию между всем браузером и левым верхним углом экрана, потому что граница 8 пикселей на краю браузера не отображается в полноэкранном режиме, поэтомуscreenXа такжеscreenYэто -8

IE: сохранить浏览器窗口文档显示区域Положение левого верхнего угла экрана относительно левого верхнего угла экрана.

Расстояние от верха веб-страницы до верха экрана: window.screenTop (полный экран браузера — это высота панели инструментов)
Расстояние от левого края веб-страницы до левого края экрана: window.screenLeft (0 для полноэкранного браузера)

ie9+

Когда окно браузера полноэкранноеscreenXа такжеscreenYэто -8

var leftPos = (typeof window.screenLeft=='number')?window.screenLeft:window.screenX;

окно

внешние размеры окна

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

window.outerWidth: Ширина окна браузера.
window.outerHeight: высота окна браузера.

1. В Chrome и Opera, когда окно браузера полноэкранное,outerWidthа такжеouterHeightозначает видимый浏览器部分занимаемое пространство.

2. В FireFox, Safari, IE9 и IE10, когда окно браузера развернуто на весь экран,outerWidthа такжеouterHeightОтносится не только к занимаемому браузером пространству, которое можно увидеть, но и к той его части, которая не отображается. Когда окно браузера выйдет из полноэкранного режима, вокруг него будет 8 пикселей.边框. Когда окно браузера полноэкранное, хотя граница и не отображается, она все равно рассчитывается вouterWidthа такжеouterHeightВнутри.

3, IE7, 8 не поддерживают.

внутренний размер окна

Внутренний размер окна (также называемый размером области просмотра) состоит из ширины и высоты области просмотра, в которой отображается веб-страница, включая полосы прокрутки.

window.innerWidth: ширина окна просмотра.
window.innerHeight: высота окна просмотра.

Клиентская зона

Клиентское измерение элемента, которое относится к объему пространства, занимаемому содержимым элемента, и его заполнению.

clientWidth: Ширина видимой области содержимого.
clientHeight: высота области просмотра содержимого.

1. При наличии полосы прокрутки clientWidth = ширина элемента + отступы (слева и справа) - полоса прокрутки

2. Если нет полосы прокрутки clientWidth = ширина элемента + отступы (слева и справа)

3. Получить размер страницы: let pageWidth = document.documentElement.clientWidth || document.body.clientWidth (версии до ie7);

размер страницы

Размер веб-страницы состоит из ширины и высоты отображаемого содержимого страницы.

scrollWidth: ширина фактического содержимого. То же, что и clientWidth, если нет вертикальной полосы прокрутки. В противном случае он равен ширине + отступу фактического содержимого. scrollWidth также включает псевдоэлементы, такие как ::before и ::after.
scrollHeight: Высота фактического содержимого. То же, что и clientHeight, если нет вертикальной полосы прокрутки. В противном случае он равен фактической высоте содержимого + отступу. scrollHeight также включает псевдоэлементы, такие как ::before и ::after.

расстояние прокрутки

scrollLeft: расстояние между самым левым краем элемента и самым левым краем видимого содержимого в окне. То есть расстояние текущей прокрутки влево
scrollTop: расстояние между верхней частью элемента и верхней частью видимого содержимого в окне. То есть текущее расстояние прокрутки

1. Если есть полоса прокрутки scrollLeft = ширина скрытого контента + граница
2. Если полосы прокрутки нет, scrollLeft = 0

приложение

Что касается scrollX, pageXOffset, scrollLeft, общее использование выглядит следующим образом:

window.scrollX;
window.pageXOffset;
document.documenetElement.scrollLeft

Если вы хотите получить размер документа в пикселях при прокрутке слева, вы можете использовать следующий метод:

Свойство pageXOffset объекта окна всегда может возвращать длину прокрутки, независимо от типа документа Это свойство поддерживается всеми браузерами, кроме IE8 и более ранних версий IE.
Свойство scrollX объекта окна всегда возвращает длину прокрутки, независимо от типа документа, Firefox, Chrome и Safari поддерживают это свойство.
Если тип документа не указан, в IE, Firefox, Opera, Chrome и Safari значение прокрутки можно получить через scrollLeft тела.
В IE, Firefox и Opera свойство scrollLeft можно использовать для получения значения прокрутки, если указан тип документа, но в Chrome и Safari значение всегда равно 0.
Если тип документа не указан, свойство html scrollLeft всегда возвращает 0.

Основываясь на приведенной выше информации, мы можем сделать вывод, что метод получения значения прокрутки полосы прокрутки выглядит следующим образом:

var scrollLeft =  window.scrollX != undefined ? window.scrollX : window.pageXOffset;
scrollLeft = scrollLeft != undefined ? scrollLeft : (document.documentElement || document.body).scrollLeft;

Компенсировать

Смещение включает все видимое пространство, занимаемое элементом на экране. Видимый размер элемента определяется его высотой, шириной, включая все отступы, полосы прокрутки и размеры границ (обратите внимание, что поля не включены).

offsetHeight: размер пространства, занимаемого элементом по вертикали, включая высоту элемента (видимый)

Высота горизонтальной полосы прокрутки, высота верхней границы и высота нижней границы.

offsetWidth: Размер пространства, занятого в горизонтальном направлении. Включает ширину элемента, (видимой) висит

Ширина вертикальной полосы прокрутки, ширина левой границы и ширина правой границы.

offsetLeft: Расстояние от левого края области содержимого (включая границу) текущего элемента до левого края области содержимого (исключая границу) offsetParent.
offsetTop: расстояние от верхней части области содержимого текущего элемента (включая границу) до верхней части области содержимого offsetParent (исключая границу).

offsetWidth = ширина элемента + отступы (слева и справа) + граница (слева и справа) + ширина полосы прокрутки

О offsetParent

HTMLElement.offsetParentДоступное только для чтения свойство, которое возвращает указатель на ближайший (ссылаясь на ближайший на содержащем уровне) позиционированный элемент, содержащий элемент. Если нет позиционированного элемента, тоoffsetParentдля самого последнегоtable,table cellили корневой элемент (в стандартном режиме,html; в причудливом режимеbody). когда элементstyle.displayЕсли установлено значение «нет»,offsetParentвернутьnull.offsetParentполезно, потому чтоoffsetTopа такжеoffsetLeftотносятся к их границам заполнения

Вот несколько возможных сценариев для изучения:

Если сам элемент имеет фиксированное позиционирование, а родительский элемент не имеет позиционирования, результатом offsetParent будет null (в firefox: body другие браузеры возвращают null)
Сам элемент не имеет фиксированного позиционирования, а родительский элемент не имеет позиционирования, offsetParent — это элемент
Сам элемент не имеет фиксированного позиционирования, а родительский элемент имеет позиционирование, offsetParent — это ближайший к себе родительский элемент, который был позиционирован
offsetParent возвращает значение null, если для элемента style.display установлено значение «none».
offsetParent элемента равен нулю

Ниже приведен результат теста в хроме, номер соответствует указанному выше

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="test1" style="position: fixed"></div>
    <div id="test2"></div>
    <div id="div0" style="position: absolute">
      <div id="div1" style="position: absolute">
        <div id="test3"></div>
      </div>
    </div>
    <div id="test4" style="display: none"></div>
    <script>
      console.log(document.getElementById('test1').offsetParent); //【1】:null
      console.log(document.getElementById('test2').offsetParent); // 【2】:<body>
      console.log(document.getElementById('test3').offsetParent); // 【3】:<div id="div1">
      console.log(document.getElementById('test4').offsetParent); // 【4】null
      console.log(document.body.offsetParent); // 【5】null
    </script>
  </body>
</html>

Просто 🌰:

<main style="position: relative" id="main">
  <article>
    <div id="example" style="position: absolute; left: 180px; top: 180px">...</div>
  </article>
</main>
<script>
  alert(example.offsetParent.id); // main
  alert(example.offsetLeft); // 180
  alert(example.offsetTop); // 180
</script>

демо

Возьмите один 🌰 в качестве демонстрации

<div id="example">
  ...Text...
</div>
<style>
  #example {
    width: 300px;
    height: 200px;
    border: 25px solid #E8C48F;
    padding: 20px;
    overflow: auto;
  }
</style>

Элемент div здесь имеет рамку, отступы и полосы прокрутки (маржа не принадлежит части элемента, здесь она не указана), элемент выглядит следующим образом👇:

Если ширина содержимого полосы прокрутки составляет 300, но если ширина Scrollbar составляет 16 пикселей (ширина может варьироваться в зависимости от устройств и браузеров), остается только 300 - 16 = 284Px ширина, поэтому мы должны принять это во внимание.

Ниже приведены подробные аннотации о размере и смещении элемента:

Компенсировать

offsetWidth = 390: внутренняя ширина CSS (300 пикселей) + отступ (2 * 20 пикселей) + граница (2 * 25 пикселей).
offsetHeight = 290: Внешняя высота.

Клиентская зона

В этом примере мы можем использоватьclientTopа такжеclientLeftЧтобы измерить границы элемента:

clientLeft = 25: Ширина левой границы
clientTop = 25: ширина верхней границы

Когда документ написан справа налево (ОС — арабский или иврит). Полоса прокрутки находится не справа, а слева, на этот раз clientLeft также включает в себя ширину полосы прокрутки. (Это редкость и может быть проигнорировано)

Как упоминалось ранее, clientWidth/Height предоставляет размер видимой области содержимого, включая ширину содержимого и границу, но полоса прокрутки отсутствует:

clientHeight = 240: Горизонтальная полоса прокрутки отсутствует, поэтому она равна сумме содержимого внутри рамки: высота CSS 200 пикселей + верхний и нижний отступы (2*20 пикселей). или offsetHeight290 - граница (2*25px)
clientWidth = 324: высота содержимого составляет 284 пикселя + отступы слева и справа по 40 пикселей. или offsetWidth390px - граница (2*25px) - ширина полосы прокрутки 16

Когда отступов нет, мы можем использовать clientWidth/clientHeight, чтобы получить размер области содержимого.

прокрутить

Свойства scrollWidth/Height аналогичны clientWidth/clientHeight, но они также включают прокручиваемую (скрытую) часть:

scrollHeight = 723: вся внутренняя высота области содержимого, включая прокручиваемую часть.
scrollWidth = 324: это вся внутренняя ширина, здесь у нас нет горизонтальной прокрутки, поэтому она равна clientWidth.

расширять

Используйте эти свойства, чтобы расширить элемент до полной ширины/высоты:

element.style.height = `${element.scrollHeight}px`;

Свойства scrollLeft/scrollTop — это скрытая ширина/высота прокручиваемой части элемента.

На картинке ниже 👇 мы можем видетьscrollHeightа такжеscrollTopассоциация:

Можно сказать, что ScrollTop показывает, «сколько прокручено вверх».

Выполнить elem.scrollTop += 10. Это прокручивает содержимое элемента на 10 пикселей вниз. Установка для scrollTop значения 0 или большего значения, например 1e9, приведет к прокрутке элемента вверх/вниз соответственно.

постскриптум

Надеюсь, после прочтения этой статьи вы теперь лучше понимаете, как определять различные размеры. ❤️

Справочная статья 📜

❤️ Расширенное программирование на JavaScript (третье издание)

❤️Углубленное понимание позиционирования родительского элемента offsetParent и размера смещения

❤️help.dot toro.com/Способ подключения Наша школа особенная.Сотрудничайте с…

❤️developer.Mozilla.org/this-cn/docs/…

❤️Блог woohoo.cn на.com/Miss-radish…

расширение 🏆

Если эта статья окажется для вас полезной, вы можете ознакомиться с другими моими статьями ❤️:

👍10 простых приемов, которые сделают ваш код vue.js более элегантным 🍊

👍Контакт с нулевым расстоянием с веб-сокетом 🚀

👍5 шаблонов проектирования, которые вы должны знать о веб-разработке

👍Структуры данных, которые должны знать веб-разработчики