Метрики
Вот общая картина с геометрическими свойствами. Значениями свойств являются числа, подразумевается, что они в пикселях.
К ней мы часто будем возвращаться в следующих постах и описывать отдельные составляющие. А пока просто изучите, что за что примерно отвечает.
#браузер #документ #размеры
Вот общая картина с геометрическими свойствами. Значениями свойств являются числа, подразумевается, что они в пикселях.
К ней мы часто будем возвращаться в следующих постах и описывать отдельные составляющие. А пока просто изучите, что за что примерно отвечает.
#браузер #документ #размеры
👍4🔥4
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).#браузер #документ #размеры
👍5🔥2
Вот так выглядят свойства offsetParent, offsetLeft/Top
Подробное описание можете посмотреть постом выше: https://t.me/notesjs/367
#браузер #документ #размеры
Подробное описание можете посмотреть постом выше: https://t.me/notesjs/367
#браузер #документ #размеры
👍4🔥1
offsetWidth/Height
Теперь переходим к самому элементу.
Эти два свойства – самые простые. Они содержат «внешнюю» ширину/высоту элемента, то есть его полный размер, включая рамки.
Для нашего элемента:
-
-
#браузер #документ #размеры
Теперь переходим к самому элементу.
Эти два свойства – самые простые. Они содержат «внешнюю» ширину/высоту элемента, то есть его полный размер, включая рамки.
Для нашего элемента:
-
offsetWidth = 390 – внешняя ширина блока, её можно получить сложением CSS-ширины (300px), внутренних отступов (2 * 20px) и рамок (2 * 25px).-
offsetHeight = 290 – внешняя высота блока.#браузер #документ #размеры
👍9🔥2
Метрики для не показываемых элементов равны нулю.
Координаты и размеры в JavaScript устанавливаются только для видимых элементов.
Если элемент (или любой его родитель) имеет
Например, свойство
Мы можем использовать это, чтобы делать проверку на видимость.
Заметим, что функция
#браузер #документ #размеры
Координаты и размеры в JavaScript устанавливаются только для видимых элементов.
Если элемент (или любой его родитель) имеет
display:none или отсутствует в документе, то все его метрики равны нулю (или null, если это offsetParent).Например, свойство
offsetParent равно null, а offsetWidth и offsetHeight равны 0, когда мы создали элемент, но ещё не вставили его в документ, или если у элемента (или у его родителя) display:none.Мы можем использовать это, чтобы делать проверку на видимость.
Заметим, что функция
isHidden также вернёт true для элементов, которые в принципе показываются, но их размеры равны нулю (например, пустые <div>).#браузер #документ #размеры
👍9🔥2
clientTop/Left
Пойдём дальше. Внутри элемента у нас рамки (border).
Для них есть свойства-метрики
В нашем примере:
-
-
Но на самом деле эти свойства – вовсе не ширины рамок, а отступы внутренней части элемента от внешней.
#браузер #документ #размеры
Пойдём дальше. Внутри элемента у нас рамки (border).
Для них есть свойства-метрики
clientTop и clientLeft.В нашем примере:
-
clientLeft = 25 – ширина левой рамки-
clientTop = 25 – ширина верхней рамкиНо на самом деле эти свойства – вовсе не ширины рамок, а отступы внутренней части элемента от внешней.
#браузер #документ #размеры
👍5🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Прокачивай свой технический английский без больших усилий, уделяя 5 минут в день!
На этом канале регулярно публикуют самые популярные слова и выражения из мира IT.
Подойдет всем IT-специалистам, которые хотят без труда читать документацию на английском и свободно общаться с иностранными заказчиками.
Подписывайся на @enforit и качай свой инглиш, пока компилируется проект👌
На этом канале регулярно публикуют самые популярные слова и выражения из мира IT.
Подойдет всем IT-специалистам, которые хотят без труда читать документацию на английском и свободно общаться с иностранными заказчиками.
Подписывайся на @enforit и качай свой инглиш, пока компилируется проект👌
👍1
scrollWidth/Height
Эти свойства – как
На рисунке выше:
-
-
Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту.
#браузер #документ #размеры
Эти свойства – как
clientWidth/clientHeight, но также включают в себя прокрученную (которую не видно) часть элемента.На рисунке выше:
-
scrollHeight = 723 – полная внутренняя высота, включая прокрученную область.-
scrollWidth = 324 – полная внутренняя ширина, в данном случае прокрутки нет, поэтому она равна clientWidth.Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту.
#браузер #документ #размеры
👍9🔥2
scrollLeft/scrollTop
Свойства
Следующая иллюстрация показывает значения
Другими словами, свойство
#браузер #документ #размеры
Свойства
scrollLeft/scrollTop – ширина/высота невидимой, прокрученной в данный момент, части элемента слева и сверху.Следующая иллюстрация показывает значения
scrollHeight и scrollTop для блока с вертикальной прокруткой.Другими словами, свойство
scrollTop – это «сколько уже прокручено вверх».#браузер #документ #размеры
👍7🔥2
Свойства scrollLeft/scrollTop можно изменять
В отличие от большинства свойств, которые доступны только для чтения, значения
При клике на следующий элемент будет выполняться код
Установка значения
#браузер #документ #размеры
В отличие от большинства свойств, которые доступны только для чтения, значения
scrollLeft/scrollTop можно изменять, и браузер выполнит прокрутку элемента.При клике на следующий элемент будет выполняться код
elem.scrollTop += 10. Поэтому он будет прокручиваться на 10px вниз.Установка значения
scrollTop на 0 или Infinity прокрутит элемент в самый верх/низ соответственно.#браузер #документ #размеры
👍7🔥1
Не window.innerWidth/Height
Браузеры также поддерживают свойства
Если есть полоса прокрутки, и она занимает какое-то место, то свойства
А
Если полоса прокрутки занимает некоторое место, то эти две строки выведут разные значения.
#браузер #документ #размеры
Браузеры также поддерживают свойства
window.innerWidth/innerHeight. Вроде бы, похоже на то, что нам нужно. Почему же не использовать их?Если есть полоса прокрутки, и она занимает какое-то место, то свойства
clientWidth/clientHeight указывают на ширину/высоту документа без неё (за её вычетом). Иными словами, они возвращают высоту/ширину видимой части документа, доступной для содержимого.А
window.innerWidth/innerHeight включают в себя полосу прокрутки.Если полоса прокрутки занимает некоторое место, то эти две строки выведут разные значения.
#браузер #документ #размеры
👍8🔥1
Ширина/высота документа
Теоретически, т.к. корневым элементом документа является
Но именно на этом элементе, для страницы в целом, эти свойства работают не так, как предполагается. В Chrome/Safari/Opera, если нет прокрутки, то
Чтобы надёжно получить полную высоту документа, нам следует взять максимальное из этих свойств.
#браузер #документ #размеры
Теоретически, т.к. корневым элементом документа является
documentElement, и он включает в себя всё содержимое, мы можем получить полный размер документа как documentElement.scrollWidth/scrollHeight.Но именно на этом элементе, для страницы в целом, эти свойства работают не так, как предполагается. В Chrome/Safari/Opera, если нет прокрутки, то
documentElement.scrollHeight может быть даже меньше, чем documentElement.clientHeight! С точки зрения элемента это невозможная ситуация.Чтобы надёжно получить полную высоту документа, нам следует взять максимальное из этих свойств.
#браузер #документ #размеры
👍4❤1🔥1
Получение текущей прокрутки
Обычные элементы хранят текущее состояние прокрутки в
Что же со страницей? В большинстве браузеров мы можем обратиться к
К счастью, нам совсем не обязательно запоминать эти особенности, потому что текущую прокрутку можно прочитать из свойств
Эти свойства доступны только для чтения.
#браузер #документ #размеры
Обычные элементы хранят текущее состояние прокрутки в
elem.scrollLeft/scrollTop.Что же со страницей? В большинстве браузеров мы можем обратиться к
documentElement.scrollLeft/Top, за исключением основанных на старом WebKit (Safari), где есть ошибка (5991), и там нужно использовать document.body вместо document.documentElement.К счастью, нам совсем не обязательно запоминать эти особенности, потому что текущую прокрутку можно прочитать из свойств
window.pageXOffset/pageYOffsetЭти свойства доступны только для чтения.
#браузер #документ #размеры
👍3🔥1
Запретить прокрутку
Иногда нам нужно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.
Чтобы запретить прокрутку страницы, достаточно установить
Аналогичным образом мы можем «заморозить» прокрутку для других элементов, а не только для
Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место.
Это выглядит немного странно, но это можно обойти, если сравнить
#браузер #документ #размеры
Иногда нам нужно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.
Чтобы запретить прокрутку страницы, достаточно установить
document.body.style.overflow = "hidden".Аналогичным образом мы можем «заморозить» прокрутку для других элементов, а не только для
document.body.Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место.
Это выглядит немного странно, но это можно обойти, если сравнить
clientWidth до и после остановки, и если clientWidth увеличится (значит полоса прокрутки исчезла), то добавить padding в document.body вместо полосы прокрутки, чтобы оставить ширину содержимого прежней.#браузер #документ #размеры
👍10🔥5
Нравится ли вам оформление и содержание канала?
Это анонимный опрос с целью улучшения контента.
Это анонимный опрос с целью улучшения контента.
Anonymous Poll
80%
Да, все нравится
11%
Нравится содержание, но не нравится оформление
6%
Нравится оформление, но не нравится содержание
3%
Ничего не нравится
👍5🔥4❤2
Element.getBoundingClientRect()
Метод
Результатом является самый маленький прямоугольник, в котором содержится весь элемент с read-only
#браузер #документ #координаты
Метод
Element.getBoundingClientRect() возвращает размер элемента и его позицию относительно viewport (часть страницы, показанная на экране, и которую мы видим).Результатом является самый маленький прямоугольник, в котором содержится весь элемент с read-only
left, top, right, bottom, x, y, width и height свойствами, описывающие это в пикселях. Все свойства, кроме width и height, являются относительными к верхнему левому углу viewport-а.#браузер #документ #координаты
👍3🔥2❤1
Зачем вообще нужны зависимые свойства? Для чего существуют top/left, если есть x/y?
С математической точки зрения, прямоугольник однозначно задаётся начальной точкой
Так что дополнительные зависимые свойства существуют лишь для удобства.
Что же касается
То есть, отрицательные значения
#браузер #документ #координаты
С математической точки зрения, прямоугольник однозначно задаётся начальной точкой
(x,y) и вектором направления (width,height).Так что дополнительные зависимые свойства существуют лишь для удобства.
Что же касается
top/left, то они на самом деле не всегда равны x/y. Технически, значения width/height могут быть отрицательными. Это позволяет задать «направленный» прямоугольник, например, для выделения мышью с отмеченным началом и концом.То есть, отрицательные значения
width/height означают, что прямоугольник «растет» влево-вверх из правого угла.#браузер #документ #координаты
👍4🔥2❤1