JavaScript заметки

scrollLeft/scrollTop Свойства scrollLeft/scrollTop – ширина/высота невидимой, прокрученной в данный момент, части элемента слева и сверху. Следующая иллюстрация показывает значения scrollHeight и scrollTop для блока с вертикальной прокруткой. Другими словами, свойство scrollTop – это «сколько уже прокручено вверх». #браузер #документ #размеры

scrollWidth/Height Эти свойства – как clientWidth/clientHeight, но также включают в себя прокрученную (которую не видно) часть элемента. На рисунке выше: - scrollHeight = 723 – полная внутренняя высота, включая прокрученную область. - scrollWidth = 324 – полная внутренняя ширина, в данном случае прокрутки нет, поэтому она равна clientWidth. Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту. #браузер #документ #размеры

clientTop/Left Пойдём дальше. Внутри элемента у нас рамки (border). Для них есть свойства-метрики clientTop и clientLeft. В нашем примере: - clientLeft = 25 – ширина левой рамки - clientTop = 25 – ширина верхней рамки Но на самом деле эти свойства – вовсе не ширины рамок, а отступы внутренней части элемента от внешней. #браузер #документ #размеры

Метрики для не показываемых элементов равны нулю. Координаты и размеры в JavaScript устанавливаются только для видимых элементов. Если элемент (или любой его родитель) имеет display:none или отсутствует в документе, то все его метрики равны нулю (или null, если это offsetParent). Например, свойство offsetParent равно null, а offsetWidth и offsetHeight равны 0, когда мы создали элемент, но ещё не вставили его в документ, или если у элемента (или у его родителя) display:none. Мы можем использовать это, чтобы делать проверку на видимость. Заметим, что функция isHidden также вернёт true для элементов, которые в принципе показываются, но их размеры равны нулю (например, пустые <div>). #браузер #документ #размеры

Чтобы ты увидел этот пост, я заплатил админу этого канала деньги 💵 Я тоже получаю деньги за то, что клиенты покупают рекламу в моей сетке телеграм-каналов. И тебе повезло, ты можешь научиться делать так же на моем Telegram Хакатоне уже в эту субботу! В сентябре я вытащил с 10 каналов 300к+ рублей. При этом я только контролировал менеджеров. Не делал ничего руками.  Неплохой пассивный доход, не так ли?  Переходи ко мне в канал, там я подробнее рассказываю про свой Telegram Хакатон, что это такое и как на него попасть! Увидимся там!

offsetWidth/Height Теперь переходим к самому элементу. Эти два свойства – самые простые. Они содержат «внешнюю» ширину/высоту элемента, то есть его полный размер, включая рамки. Для нашего элемента: - offsetWidth = 390 – внешняя ширина блока, её можно получить сложением CSS-ширины (300px), внутренних отступов (2 * 20px) и рамок (2 * 25px). - offsetHeight = 290 – внешняя высота блока. #браузер #документ #размеры

Вот так выглядят свойства offsetParent, offsetLeft/Top Подробное описание можете посмотреть постом выше: https://t.me/notesjs/367 #браузер #документ #размеры

Хотите увеличить уровень дохода и стать востребованным специалистом в IT? Тогда у нас для вас новости! Уже 14 октября стартует бесплатный интенсив по JavaScript! Участвуйте и вы не только разберётесь с основами создания сайтов и познакомитесь с JavaScript, но и попробуете себя в качестве фронтенд-разработчика. 🤩 Участвуйте в интенсиве, чтобы получить: ✅ Бесплатные тренировочные материалы; ✅ Статьи и материалы от экспертов; ✅ Скидки на обучение. А среди тех, кто дойдёт до конца, разыграем 3 проекта по JavaScript «Счётчик калорий».

offsetParent, offsetLeft/Top Эти свойства редко используются, но так как они являются «самыми внешними» метриками, мы начнём с них. В свойстве offsetParent находится предок элемента, который используется внутри браузера для вычисления координат при рендеринге. То есть, ближайший предок, который удовлетворяет следующим условиям: - Является CSS-позиционированным (CSS-свойство position равно absolute, relative, fixed или sticky), - или <td>, <th>, <table>, - или <body>. Свойства offsetLeft/offsetTop содержат координаты x/y относительно верхнего левого угла offsetParent. В примере выше внутренний <div> имеет элемент <main> в качестве offsetParent, а свойства offsetLeft/offsetTop являются сдвигами относительно верхнего левого угла (180). #браузер #документ #размеры

Метрики Вот общая картина с геометрическими свойствами. Значениями свойств являются числа, подразумевается, что они в пикселях. К ней мы часто будем возвращаться в следующих постах и описывать отдельные составляющие. А пока просто изучите, что за что примерно отвечает. #браузер #документ #размеры

Делимся нашим приватным архивом на 1300ГБ курсов: 1. Обучение Python с нуля 2. Обучение JavaScript с нуля 3. Обучение С++ с нуля 4. Обучение С# с нуля 5. Обучение HTML/CSS с нуля 6. Обучение Java с нуля 7. Обучение SQL/GO/PHP с нуля Вход открыт 24 часа, это наш подарок для вас ❤

Внимание, полоса прокрутки В иллюстрации выше намеренно продемонстрирован самый сложный и полный случай, когда у элемента есть ещё и полоса прокрутки. Некоторые браузеры (не все) отбирают место для неё, забирая его у области, отведённой для содержимого (помечена как «content width» выше). Таким образом, без учёта полосы прокрутки ширина области содержимого (content width) будет 300px, но если предположить, что ширина полосы прокрутки равна 16px (её точное значение зависит от устройства и браузера), тогда остаётся только 300 - 16 = 284px, и мы должны это учитывать. Вот почему примеры в этой главе даны с полосой прокрутки. Без неё некоторые вычисления будут проще. #браузер #документ #размеры

Размеры и полоса прокрутки: общий вид У элемента есть рамка border, внутренний отступ padding и прокрутка. Полный набор характеристик. Обратите внимание, тут нет внешних отступов margin, потому что они не являются частью элемента, для них нет особых JavaScript-свойств. #браузер #документ #размеры

FrontEndDev - один из крупнейших каналов по веб-разработке. ☝🏻 Больше 6 лет снабжаем подписчиков полезной информацией, которая помогает стать сильным и востребованным разработчиком. Админы собирают фишки и тонкости JS/TS/CSS, библиотеки, упрощающие разработку, практики по написанию эффективного кода, и многое другое! Подписывайтесь: 👉 FrontEndDev

Размеры и прокрутка элементов Существует множество JavaScript-свойств, которые позволяют считывать информацию об элементе: ширину, высоту и другие геометрические характеристики. В этой главе мы будем называть их «метрики». Они часто требуются, когда нам нужно передвигать или позиционировать элементы с помощью JavaScript. #браузер #документ #размеры

Итого по стилям и классам Для управления классами существуют два DOM-свойства: - className – строковое значение, удобно для управления всем набором классов. - classList – объект с методами add/remove/toggle/contains, удобно для управления отдельными классами. Чтобы изменить стили: - Свойство style является объектом со стилями в формате camelCase. Чтение и запись в него работают так же, как изменение соответствующих свойств в атрибуте "style". Чтобы узнать, как добавить в него important и делать некоторые другие редкие вещи – смотрите документацию. - Свойство style.cssText соответствует всему атрибуту "style", полной строке стилей. Для чтения окончательных стилей (с учётом всех классов, после применения CSS и вычисления окончательных значений) используется: - Метод getComputedStyle(elem, [pseudo]) возвращает объект, похожий по формату на style. Только для чтения. #браузер #документ #стили_классы

Не умеешь в js? Канал для начинающих в js поможет вам сделать ваш сайт чуточку интерактивнее. Подпишись!

Стили, применяемые к посещённым :visited ссылкам, скрываются! Посещённые ссылки могут быть окрашены с помощью псевдокласса :visited. Но getComputedStyle не даёт доступ к этой информации, чтобы произвольная страница не могла определить, посещал ли пользователь ту или иную ссылку, проверив стили. JavaScript не видит стили, применяемые с помощью :visited. Кроме того, в CSS есть ограничение, которое запрещает в целях безопасности применять к :visited CSS-стили, изменяющие геометрию элемента. Это гарантирует, что нет обходного пути для «злой» страницы проверить, была ли ссылка посещена и, следовательно, нарушить конфиденциальность. #браузер #документ #стили_классы

getComputedStyle требует полное свойство! Для правильного получения значения нужно указать точное свойство. Например: paddingLeft, marginTop, borderTopWidth. При обращении к сокращённому: padding, margin, border – правильный результат не гарантируется. Например, если есть свойства paddingLeft/paddingTop, то что мы получим вызывая getComputedStyle(elem).padding? Ничего, или, может быть, «сгенерированное» значение из известных внутренних отступов? Стандарта для этого нет. Есть и другие несоответствия. Например, некоторые браузеры (Chrome) отображают 10px в документе выше (см. картинку), а некоторые (Firefox) – нет. #браузер #документ #стили_классы

Вычисленное (computed) и окончательное (resolved) значения Есть две концепции в CSS: - Вычисленное (computed) значение – это то, которое получено после применения всех CSS-правил и CSS-наследования. Например, height:1em или font-size:125%. - Окончательное (resolved) значение – непосредственно применяемое к элементу. Значения 1em или 125% являются относительными. Браузер берёт вычисленное значение и делает все единицы измерения фиксированными и абсолютными, например, height:20px или font-size:16px. Для геометрических свойств разрешённые значения могут иметь плавающую точку, например, width:50.5px. Давным-давно getComputedStyle был создан для получения вычисленных значений, но оказалось, что окончательные значения гораздо удобнее, и стандарт изменился. Так что, в настоящее время getComputedStyle фактически возвращает окончательное значение свойства, для геометрии оно обычно в пикселях. #браузер #документ #стили_классы