offsetParent, offsetLeft/Top
Эти свойства редко используются, но так как они являются «самыми внешними» метриками, мы начнём с них.
В свойстве
То есть, ближайший предок, который удовлетворяет следующим условиям:
- Является CSS-позиционированным (CSS-свойство
- или
- или
Свойства
В примере выше внутренний
#браузер #документ #размеры
Эти свойства редко используются, но так как они являются «самыми внешними» метриками, мы начнём с них.
В свойстве
offsetParent находится предок элемента, который используется внутри браузера для вычисления координат при рендеринге.То есть, ближайший предок, который удовлетворяет следующим условиям:
- Является CSS-позиционированным (CSS-свойство
position равно absolute, relative, fixed или sticky),- или
<td>, <th>, <table>,- или
<body>.Свойства
offsetLeft/offsetTop содержат координаты x/y относительно верхнего левого угла offsetParent.В примере выше внутренний
<div> имеет элемент <main> в качестве offsetParent, а свойства offsetLeft/offsetTop являются сдвигами относительно верхнего левого угла (180).#браузер #документ #размеры
👍7🔥3
Вот так выглядят свойства offsetParent, offsetLeft/Top
Подробное описание можете посмотреть постом выше: https://t.me/notesjs/567
#браузер #документ #размеры
Подробное описание можете посмотреть постом выше: https://t.me/notesjs/567
#браузер #документ #размеры
👍5🔥2
offsetWidth/Height
Теперь переходим к самому элементу.
Эти два свойства – самые простые. Они содержат «внешнюю» ширину/высоту элемента, то есть его полный размер, включая рамки.
Для нашего элемента:
-
-
#браузер #документ #размеры
Теперь переходим к самому элементу.
Эти два свойства – самые простые. Они содержат «внешнюю» ширину/высоту элемента, то есть его полный размер, включая рамки.
Для нашего элемента:
-
offsetWidth = 390 – внешняя ширина блока, её можно получить сложением CSS-ширины (300px), внутренних отступов (2 * 20px) и рамок (2 * 25px).-
offsetHeight = 290 – внешняя высота блока.#браузер #документ #размеры
🔥6👍3
Метрики для не показываемых элементов равны нулю.
Координаты и размеры в JavaScript устанавливаются только для видимых элементов.
Если элемент (или любой его родитель) имеет
Например, свойство
Мы можем использовать это, чтобы делать проверку на видимость.
Заметим, что функция
#браузер #документ #размеры
Координаты и размеры в JavaScript устанавливаются только для видимых элементов.
Если элемент (или любой его родитель) имеет
display:none или отсутствует в документе, то все его метрики равны нулю (или null, если это offsetParent).Например, свойство
offsetParent равно null, а offsetWidth и offsetHeight равны 0, когда мы создали элемент, но ещё не вставили его в документ, или если у элемента (или у его родителя) display:none.Мы можем использовать это, чтобы делать проверку на видимость.
Заметим, что функция
isHidden также вернёт true для элементов, которые в принципе показываются, но их размеры равны нулю (например, пустые <div>).#браузер #документ #размеры
👍5🔥3
clientTop/Left
Пойдём дальше. Внутри элемента у нас рамки (border).
Для них есть свойства-метрики
В нашем примере:
-
-
Но на самом деле эти свойства – вовсе не ширины рамок, а отступы внутренней части элемента от внешней.
#браузер #документ #размеры
Пойдём дальше. Внутри элемента у нас рамки (border).
Для них есть свойства-метрики
clientTop и clientLeft.В нашем примере:
-
clientLeft = 25 – ширина левой рамки-
clientTop = 25 – ширина верхней рамкиНо на самом деле эти свойства – вовсе не ширины рамок, а отступы внутренней части элемента от внешней.
#браузер #документ #размеры
👍5🔥1
scrollWidth/Height
Эти свойства – как
На рисунке выше:
-
-
Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту.
#браузер #документ #размеры
Эти свойства – как
clientWidth/clientHeight, но также включают в себя прокрученную (которую не видно) часть элемента.На рисунке выше:
-
scrollHeight = 723 – полная внутренняя высота, включая прокрученную область.-
scrollWidth = 324 – полная внутренняя ширина, в данном случае прокрутки нет, поэтому она равна clientWidth.Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту.
#браузер #документ #размеры
👍4🔥1
scrollLeft/scrollTop
Свойства
Следующая иллюстрация показывает значения
Другими словами, свойство
#браузер #документ #размеры
Свойства
scrollLeft/scrollTop – ширина/высота невидимой, прокрученной в данный момент, части элемента слева и сверху.Следующая иллюстрация показывает значения
scrollHeight и scrollTop для блока с вертикальной прокруткой.Другими словами, свойство
scrollTop – это «сколько уже прокручено вверх».#браузер #документ #размеры
👍3🔥2
Алло, мы ищем таланты!
В команду разработчиков fintech-проектов требуются уверенные пользователи ПК со знанием Word, Excel, PowerPoint и умениями разложить пасьянс-косынку с завязанными глазами. От нас кофе, чай и печенюшки, удалёнка с удобным графиком в любимом кресле на вашей персональной клаве, если конечно у вас не лапки! Для проверки, что не лапки, есть несложные тестовые задания.
А если без юмора, то:
Ищем backend-разработчиков с опытом работы от 1 года; уверенным владением Laravel; опытом разработки на PHP, MySQL, знаниями ООП; уверенной работой c Git. Приветствуем: знания верстки, HTML, CSS, JS и популярные библиотеки; знание Docker, владение консолью.
Ищем frontend-разработчиков: HTML, CSS, Javascript, ES6 React Redux git, Redux toolkit, Next.js.
Удаленная работа. График свободный, предпочтительно внутри дня по мск. Оплата от 70 000 junior, от 100 000 mid, от 150 000 senior. Возможность работы по договору для самозанятых или официальное трудоустройство согласно ТК РФ.
Связь по тлг: @scorpinfire
В команду разработчиков fintech-проектов требуются уверенные пользователи ПК со знанием Word, Excel, PowerPoint и умениями разложить пасьянс-косынку с завязанными глазами. От нас кофе, чай и печенюшки, удалёнка с удобным графиком в любимом кресле на вашей персональной клаве, если конечно у вас не лапки! Для проверки, что не лапки, есть несложные тестовые задания.
А если без юмора, то:
Ищем backend-разработчиков с опытом работы от 1 года; уверенным владением Laravel; опытом разработки на PHP, MySQL, знаниями ООП; уверенной работой c Git. Приветствуем: знания верстки, HTML, CSS, JS и популярные библиотеки; знание Docker, владение консолью.
Ищем frontend-разработчиков: HTML, CSS, Javascript, ES6 React Redux git, Redux toolkit, Next.js.
Удаленная работа. График свободный, предпочтительно внутри дня по мск. Оплата от 70 000 junior, от 100 000 mid, от 150 000 senior. Возможность работы по договору для самозанятых или официальное трудоустройство согласно ТК РФ.
Связь по тлг: @scorpinfire
Свойства scrollLeft/scrollTop можно изменять
В отличие от большинства свойств, которые доступны только для чтения, значения
При клике на следующий элемент будет выполняться код
Установка значения
#браузер #документ #размеры
В отличие от большинства свойств, которые доступны только для чтения, значения
scrollLeft/scrollTop можно изменять, и браузер выполнит прокрутку элемента.При клике на следующий элемент будет выполняться код
elem.scrollTop += 10. Поэтому он будет прокручиваться на 10px вниз.Установка значения
scrollTop на 0 или Infinity прокрутит элемент в самый верх/низ соответственно.#браузер #документ #размеры
👍5🔥2
Не window.innerWidth/Height
Браузеры также поддерживают свойства
Если есть полоса прокрутки, и она занимает какое-то место, то свойства
А
Если полоса прокрутки занимает некоторое место, то эти две строки выведут разные значения.
#браузер #документ #размеры
Браузеры также поддерживают свойства
window.innerWidth/innerHeight. Вроде бы, похоже на то, что нам нужно. Почему же не использовать их?Если есть полоса прокрутки, и она занимает какое-то место, то свойства
clientWidth/clientHeight указывают на ширину/высоту документа без неё (за её вычетом). Иными словами, они возвращают высоту/ширину видимой части документа, доступной для содержимого.А
window.innerWidth/innerHeight включают в себя полосу прокрутки.Если полоса прокрутки занимает некоторое место, то эти две строки выведут разные значения.
#браузер #документ #размеры
👍7🔥2
Ширина/высота документа
Теоретически, т.к. корневым элементом документа является
Но именно на этом элементе, для страницы в целом, эти свойства работают не так, как предполагается. В Chrome/Safari/Opera, если нет прокрутки, то
Чтобы надёжно получить полную высоту документа, нам следует взять максимальное из этих свойств.
#браузер #документ #размеры
Теоретически, т.к. корневым элементом документа является
documentElement, и он включает в себя всё содержимое, мы можем получить полный размер документа как documentElement.scrollWidth/scrollHeight.Но именно на этом элементе, для страницы в целом, эти свойства работают не так, как предполагается. В Chrome/Safari/Opera, если нет прокрутки, то
documentElement.scrollHeight может быть даже меньше, чем documentElement.clientHeight! С точки зрения элемента это невозможная ситуация.Чтобы надёжно получить полную высоту документа, нам следует взять максимальное из этих свойств.
#браузер #документ #размеры
👍2🔥1
Получение текущей прокрутки
Обычные элементы хранят текущее состояние прокрутки в
Что же со страницей? В большинстве браузеров мы можем обратиться к
К счастью, нам совсем не обязательно запоминать эти особенности, потому что текущую прокрутку можно прочитать из свойств
Эти свойства доступны только для чтения.
#браузер #документ #размеры
Обычные элементы хранят текущее состояние прокрутки в
elem.scrollLeft/scrollTop.Что же со страницей? В большинстве браузеров мы можем обратиться к
documentElement.scrollLeft/Top, за исключением основанных на старом WebKit (Safari), где есть ошибка (5991), и там нужно использовать document.body вместо document.documentElement.К счастью, нам совсем не обязательно запоминать эти особенности, потому что текущую прокрутку можно прочитать из свойств
window.pageXOffset/pageYOffsetЭти свойства доступны только для чтения.
#браузер #документ #размеры
👍5🔥2
Пора строить карьеру в IT – Front-end разработчик – одна из самых востребованных специальностей на рынке труда. Это тот человек, который занимается построением логики сайтов и сервисов, отвечает за весь Front.
В его обязанности входит:
- Проектирование архитектуры логики проекта;
- Разработка идей и стратегии развития продукта;
- Написание кода с использованием различных фреймворков и библиотек;
- Участие в конференциях и хакатонах.
И это лишь малая доля того, что вы будете делать на новом месте работы. Все необходимое вы изучите на наших курсах. Вас ждут 5 месяцев интенсивной работы с практикующими специалистами.
Завершившим курс – шанс попасть на закрытую стажировку на различные проекты в команду к опытным разработчикам.
Переходи по ссылке: dev-house.online, чтобы изучить программу курса и забронировать место. Найди на сайте и скажи менеджеру промокод и получишь дополнительную скидку. Спеши – промокод действует только для первых 20 человек.)
В его обязанности входит:
- Проектирование архитектуры логики проекта;
- Разработка идей и стратегии развития продукта;
- Написание кода с использованием различных фреймворков и библиотек;
- Участие в конференциях и хакатонах.
И это лишь малая доля того, что вы будете делать на новом месте работы. Все необходимое вы изучите на наших курсах. Вас ждут 5 месяцев интенсивной работы с практикующими специалистами.
Завершившим курс – шанс попасть на закрытую стажировку на различные проекты в команду к опытным разработчикам.
Переходи по ссылке: dev-house.online, чтобы изучить программу курса и забронировать место. Найди на сайте и скажи менеджеру промокод и получишь дополнительную скидку. Спеши – промокод действует только для первых 20 человек.)
Запретить прокрутку
Иногда нам нужно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.
Чтобы запретить прокрутку страницы, достаточно установить
Аналогичным образом мы можем «заморозить» прокрутку для других элементов, а не только для
Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место.
Это выглядит немного странно, но это можно обойти, если сравнить
#браузер #документ #размеры
Иногда нам нужно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.
Чтобы запретить прокрутку страницы, достаточно установить
document.body.style.overflow = "hidden".Аналогичным образом мы можем «заморозить» прокрутку для других элементов, а не только для
document.body.Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место.
Это выглядит немного странно, но это можно обойти, если сравнить
clientWidth до и после остановки, и если clientWidth увеличится (значит полоса прокрутки исчезла), то добавить padding в document.body вместо полосы прокрутки, чтобы оставить ширину содержимого прежней.#браузер #документ #размеры
👍9🔥2❤1
Element.getBoundingClientRect()
Метод
Результатом является самый маленький прямоугольник, в котором содержится весь элемент с read-only
#браузер #документ #координаты
Метод
Element.getBoundingClientRect() возвращает размер элемента и его позицию относительно viewport (часть страницы, показанная на экране, и которую мы видим).Результатом является самый маленький прямоугольник, в котором содержится весь элемент с read-only
left, top, right, bottom, x, y, width и height свойствами, описывающие это в пикселях. Все свойства, кроме width и height, являются относительными к верхнему левому углу viewport-а.#браузер #документ #координаты
👍8🔥3
Зачем вообще нужны зависимые свойства? Для чего существуют top/left, если есть x/y?
С математической точки зрения, прямоугольник однозначно задаётся начальной точкой
Так что дополнительные зависимые свойства существуют лишь для удобства.
Что же касается
То есть, отрицательные значения
#браузер #документ #координаты
С математической точки зрения, прямоугольник однозначно задаётся начальной точкой
(x,y) и вектором направления (width,height).Так что дополнительные зависимые свойства существуют лишь для удобства.
Что же касается
top/left, то они на самом деле не всегда равны x/y. Технически, значения width/height могут быть отрицательными. Это позволяет задать «направленный» прямоугольник, например, для выделения мышью с отмеченным началом и концом.То есть, отрицательные значения
width/height означают, что прямоугольник «растет» влево-вверх из правого угла.#браузер #документ #координаты
👍3🔥3
elementFromPoint(x, y)
Вызов
Например, код выше выделяет с помощью стилей и выводит имя тега элемента, который сейчас в центре окна браузера.
#браузер #документ #координаты
Вызов
document.elementFromPoint(x, y) возвращает самый глубоко вложенный элемент в окне, находящийся по координатам (x, y).Например, код выше выделяет с помощью стилей и выводит имя тега элемента, который сейчас в центре окна браузера.
#браузер #документ #координаты
👍7❤1🔥1