JavaScript заметки

2022-06-07 20:08:28 Ширина/высота документа

Теоретически, т.к. корневым элементом документа является documentElement, и он включает в себя всё содержимое, мы можем получить полный размер документа как documentElement.scrollWidth/scrollHeight.

Но именно на этом элементе, для страницы в целом, эти свойства работают не так, как предполагается. В Chrome/Safari/Opera, если нет прокрутки, то documentElement.scrollHeight может быть даже меньше, чем documentElement.clientHeight! С точки зрения элемента это невозможная ситуация.

Чтобы надёжно получить полную высоту документа, нам следует взять максимальное из этих свойств.

#браузер #документ #размеры Открыть/Комментировать

2022-06-07 18:05:00 Взято из Aliexpress Программиста Открыть/Комментировать

2022-06-07 14:05:20 Не window.innerWidth/Height

Браузеры также поддерживают свойства window.innerWidth/innerHeight. Вроде бы, похоже на то, что нам нужно. Почему же не использовать их?

Если есть полоса прокрутки, и она занимает какое-то место, то свойства clientWidth/clientHeight указывают на ширину/высоту документа без неё (за её вычетом). Иными словами, они возвращают высоту/ширину видимой части документа, доступной для содержимого.

А window.innerWidth/innerHeight включают в себя полосу прокрутки.

Если полоса прокрутки занимает некоторое место, то эти две строки выведут разные значения.

#браузер #документ #размеры Открыть/Комментировать

2022-06-06 21:18:23 Ширина/высота окна

Чтобы получить ширину/высоту окна, можно взять свойства clientWidth/clientHeight из document.documentElement

#браузер #документ #размеры Открыть/Комментировать

2022-06-06 12:32:57 Свойства scrollLeft/scrollTop можно изменять

В отличие от большинства свойств, которые доступны только для чтения, значения scrollLeft/scrollTop можно изменять, и браузер выполнит прокрутку элемента.

При клике на следующий элемент будет выполняться код elem.scrollTop += 10. Поэтому он будет прокручиваться на 10px вниз.

Установка значения scrollTop на 0 или Infinity прокрутит элемент в самый верх/низ соответственно.

#браузер #документ #размеры Открыть/Комментировать

2022-06-05 11:54:40 scrollLeft/scrollTop

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

Следующая иллюстрация показывает значения scrollHeight и scrollTop для блока с вертикальной прокруткой.

Другими словами, свойство scrollTop – это «сколько уже прокручено вверх».

#браузер #документ #размеры Открыть/Комментировать

2022-06-04 18:37:05 scrollWidth/Height

Эти свойства – как clientWidth/clientHeight, но также включают в себя прокрученную (которую не видно) часть элемента.

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

Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту.

#браузер #документ #размеры Открыть/Комментировать

2022-06-04 12:57:56 Прокачивай свой технический английский без больших усилий, уделяя 5 минут в день!

На этом канале регулярно публикуют самые популярные слова и выражения из мира IT.

Подойдет всем IT-специалистам, которые хотят без труда читать документацию на английском и свободно общаться с иностранными заказчиками.

Подписывайся на @enforit и качай свой инглиш, пока компилируется проект Открыть/Комментировать

2022-06-04 10:29:41 clientTop/Left

Пойдём дальше. Внутри элемента у нас рамки (border).

Для них есть свойства-метрики clientTop и clientLeft.

В нашем примере:
- clientLeft = 25 – ширина левой рамки
- clientTop = 25 – ширина верхней рамки

Но на самом деле эти свойства – вовсе не ширины рамок, а отступы внутренней части элемента от внешней.

#браузер #документ #размеры Открыть/Комментировать

2022-06-03 22:20:55 Метрики для не показываемых элементов равны нулю.

Координаты и размеры в JavaScript устанавливаются только для видимых элементов.

Если элемент (или любой его родитель) имеет display:none или отсутствует в документе, то все его метрики равны нулю (или null, если это offsetParent).

Например, свойство offsetParent равно null, а offsetWidth и offsetHeight равны 0, когда мы создали элемент, но ещё не вставили его в документ, или если у элемента (или у его родителя) display:none.

Мы можем использовать это, чтобы делать проверку на видимость.

Заметим, что функция isHidden также вернёт true для элементов, которые в принципе показываются, но их размеры равны нулю (например, пустые