offsetWidth / offsetHeight
offsetWidth
HTMLElement.offsetWidth — это свойство только для чтения, которое возвращает ширину макета элемента. Типичный (offsetWidth может варьироваться от браузера к браузеру) offsetWidth измеряет границу содержащего элемента, горизонтальное заполнение, вертикальную полосу прокрутки (если есть) и значение ширины (ширины), установленное CSS.
var offsetWidth = element.offsetWidth;
offsetHeight
HTMLElement.offsetHeight — это свойство, доступное только для чтения, которое возвращает высоту элемента в пикселях, включая вертикальные отступы и границу элемента, и представляет собой целое число.
В общем, offsetHeight элемента — это мера высоты элемента CSS, включая границу элемента, отступы и горизонтальную полосу прокрутки элемента (если она присутствует и визуализируется), исключая высоту элементов псевдокласса, таких как :before или :after .
Для основного объекта документа он включает линейное общее содержимое вместо высоты элемента CSS. Нисходящая высота содержимого плавающих элементов игнорируется.
var offsetHeight = element.offsetHeight;
offsetTop / offsetLeft
Прежде чем вводить эти два свойства, сначала введите свойство offsetParent, которое полезно для понимания.
offsetParent
HTMLElement.offsetParent — это свойство, доступное только для чтения, которое возвращает указатель на ближайший позиционированный элемент, содержащий этот элемент. Если позиционированного элемента нет, offsetParent является ближайшей таблицей, ячейкой таблицы или корневым элементом (html в стандартном режиме; body в необычном режиме). offsetParent возвращает значение null, если для элемента style.display установлено значение «none».
offsetParent полезен, потому что как offsetTop, так и offsetLeft относятся к их границам заполнения.
var offsetParent = element.offsetParent;
offsetTop
HTMLElement.offsetTop — это свойство, доступное только для чтения, которое возвращает расстояние текущего элемента относительно верхней части его элемента offsetParent.
var offsetTop = element.offsetTop;
offsetLeft
HTMLElement.offsetLeft — это свойство, доступное только для чтения, которое возвращает смещение в пикселях левого верхнего угла текущего элемента относительно левой границы узла HTMLElement.offsetParent.
Для элементов уровня блока offsetTop, offsetLeft, offsetWidth и offsetHeight описывают ограничивающую рамку элемента относительно offsetParent.
Однако для встроенных элементов (таких как интервалы), которые могут быть усечены до следующей строки, offsetTop и offsetLeft описывают положение первой ограничивающей рамки (используяElement.getClientRects()чтобы получить его ширину и высоту), а offsetWidth и offsetHeight описывают размеры ограничивающей рамки (используйтеElement.getBoundingClientRectчтобы узнать его местоположение). Таким образом, поле, использующее offsetLeft, offsetTop, offsetWidth, offsetHeight для соответствия левому краю, верхнему краю, ширине и высоте, не будет ограничивать поле диапазона текстового контейнера.
var offsetLeft = element.offsetLeft;
clientWidth / clientHeight
clientWidth
Element.clientWidth — это свойство только для чтения, которое возвращает внутреннюю ширину элемента в пикселях. Это свойство включает отступы, но не включает вертикальные полосы прокрутки (если они есть), границы и поля.
var clientWidth = element.clientWidth;
clientHeight
Element.clientWidth — это свойство, доступное только для чтения, 0 для элементов без определенных CSS или встроенных блоков макета, и это высота (в пикселях) внутри элемента, включая отступы, но исключая горизонтальные полосы прокрутки, границы и расстояние до внешних границ.
clientHeight можно рассчитать по высоте CSS + отступу CSS - высоте горизонтальной полосы прокрутки (если она есть).
var clientHeight = element.clientHeight;
clientTop / clientLeft
clientTop
Element.clientTop — это свойство, доступное только для чтения, которое представляет ширину (в пикселях) верхней границы элемента. Не включает верхние поля и отступы.
var clientTop = element.clientTop;
clientLeft
Element.clientLeft — это атрибут только для чтения, указывающий ширину левой границы элемента в пикселях. Если текстовый элемент представляет собой направление справа налево (RTL, справа налево), а поскольку содержимое переполняется из-за того, что слева появляется вертикальная полоса прокрутки, свойство включает ширину полосы прокрутки. clientLeft не включает левые поля и левое поле.
var clientLeft = element.clientLeft;
innerWidth / innerHeight
innerWidth
Window.InnerWidth - это только для чтения свойство, представляющее ширину просмотра браузера (блок: пикселей), включая вертикальные полосы прокрутки, если они присутствуют.
var innerWidth = window.innerWidth;
innerHeight
window.innerHeight — это свойство, доступное только для чтения, которое представляет высоту области просмотра (в пикселях) окна браузера, включая горизонтальные полосы прокрутки, если они есть.
var innerHeight = window.innerHeight;
outerWidth / outerHeight
outerWidth
Window.outerWidth — это свойство, доступное только для чтения, которое представляет ширину всего окна браузера, включая боковую панель (если она есть), хромирование окна и границы/дескрипторы изменения размера окна.
var outerWidth = window.outerWidth;
outerHeight
Window.outerHeight — это свойство, доступное только для чтения, которое получает высоту (единица измерения: пиксели) всего окна браузера, включая боковую панель (если она существует), оконный хром и границы/дескрипторы изменения размера окна).
var outerHeight = window.outerHeight;
scrollTop / scrollLeft
scrollTop
Свойство Element.scrollTop получает или задает количество пикселей, на которое содержимое элемента прокручивается по вертикали.
Значение scrollTop элемента — это мера расстояния от верхней части элемента до самого верхнего видимого содержимого (верхней части). Когда содержимое элемента не создает вертикальную полосу прокрутки, его значение scrollTop равно 0.
scrollTop может быть задано любое целочисленное значение, также обратите внимание:
- Если элемент не может быть прокручен (например, он не переполняется или у элемента есть свойство «непрокручиваемый»), для scrollTop будет установлено значение 0.
- Установите значение scrollTop меньше 0, scrollTop установлено на 0
- Если вы установите значение, превышающее прокручиваемое значение этого контейнера, для scrollTop будет установлено максимальное значение.
var scrollTop = element.scrollTop; // 获取
element.scrollTop = intValue; // 设置
scrollLeft
Свойство Element.scrollLeft может считывать или задавать расстояние от полосы прокрутки элемента до левого края элемента.
Обратите внимание, что если направление содержимого элемента — rtl (справа налево), полоса прокрутки будет в крайнем правом положении (в начале содержимого), а значение scrollLeft будет равно 0. В этот момент, когда вы перетаскиваете полосу прокрутки справа налево, значение scrollLeft изменится с 0 на отрицательное (эта функция отсутствует в браузере Chrome).
Однако scrollLeft может быть любым целым числом:
- Если элемент не может быть прокручен (то есть элемент не переполняется), то scrollLeft равен 0.
- Если значение, установленное для scrollLeft, меньше 0, то значение scrollLeft станет равным 0.
- Если значение, установленное для scrollLeft, больше, чем максимальная ширина содержимого элемента, тогда значение scrollLeft будет установлено равным максимальной ширине элемента.
var scrollLeft = element.scrollLeft; // 获取
element.scrollLeft = intValue; // 设置
scrollWidth / scrollHeight
scrollWidth
Element.scrollWidth — это свойство только для чтения, которое возвращает в пикселях ширину области содержимого элемента или ширину самого элемента, в зависимости от того, что больше. Если ширина элемента больше площади его содержимого (например, когда у элемента есть полосы прокрутки), значение scrollWidth должно быть больше clientWidth.
var scrollWidth = element.scrollWidth;
scrollHeight
Element.scrollHeight — это свойство, доступное только для чтения, которое является мерой высоты содержимого элемента, включая содержимое, невидимое в поле зрения из-за переполнения. Без вертикальной полосы прокрутки значение scrollHeight совпадает с минимальным значением clientHeight, необходимым для того, чтобы представление элемента заполнило все. Включите заполнение элемента, но не границу и поля элемента. scrollHeight также включает псевдоэлементы, такие как ::before и ::after.
var scrollHeight = element.scrollHeight;
scrollX / scrollY
scrollX
Возвращает горизонтальную прокрутку документа/страницы в пикселях, где свойство pageXOffset является псевдонимом свойства scrollY.
var scrollX = window.scrollX;
Полный код совместимости для получения значения пикселя документа/страницы, прокручиваемой в горизонтальном направлении:
var x = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
scrollY
Возвращает количество пикселей, на которое документ/страница прокручивается по вертикали, где свойство pageYOffset является псевдонимом свойства scrollY.
var scrollX = window.scrollY;
Полный код совместимости для получения значения пикселя документа/страницы, прокручиваемой по вертикали:
var y = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
Пожалуйста, указывайте источник при перепечатке, спасибо!