Итого по стилям и классам
Для управления классами существуют два DOM-свойства:
-
-
Чтобы изменить стили:
- Свойство
- Свойство
Для чтения окончательных стилей (с учётом всех классов, после применения CSS и вычисления окончательных значений) используется:
- Метод
#браузер #документ #стили_классы
Для управления классами существуют два DOM-свойства:
-
className – строковое значение, удобно для управления всем набором классов.-
classList – объект с методами add/remove/toggle/contains, удобно для управления отдельными классами.Чтобы изменить стили:
- Свойство
style является объектом со стилями в формате camelCase. Чтение и запись в него работают так же, как изменение соответствующих свойств в атрибуте "style". Чтобы узнать, как добавить в него important и делать некоторые другие редкие вещи – смотрите документацию.- Свойство
style.cssText соответствует всему атрибуту "style", полной строке стилей.Для чтения окончательных стилей (с учётом всех классов, после применения CSS и вычисления окончательных значений) используется:
- Метод
getComputedStyle(elem, [pseudo]) возвращает объект, похожий по формату на style. Только для чтения.#браузер #документ #стили_классы
👍8❤2
Размеры и прокрутка элементов
Существует множество JavaScript-свойств, которые позволяют считывать информацию об элементе: ширину, высоту и другие геометрические характеристики. В этой главе мы будем называть их «метрики».
Они часто требуются, когда нам нужно передвигать или позиционировать элементы с помощью JavaScript.
#браузер #документ #размеры
Существует множество JavaScript-свойств, которые позволяют считывать информацию об элементе: ширину, высоту и другие геометрические характеристики. В этой главе мы будем называть их «метрики».
Они часто требуются, когда нам нужно передвигать или позиционировать элементы с помощью JavaScript.
#браузер #документ #размеры
👍4
Внимание, полоса прокрутки
В иллюстрации выше намеренно продемонстрирован самый сложный и полный случай, когда у элемента есть ещё и полоса прокрутки. Некоторые браузеры (не все) отбирают место для неё, забирая его у области, отведённой для содержимого (помечена как «
Таким образом, без учёта полосы прокрутки ширина области содержимого (content width) будет
#браузер #документ #размеры
В иллюстрации выше намеренно продемонстрирован самый сложный и полный случай, когда у элемента есть ещё и полоса прокрутки. Некоторые браузеры (не все) отбирают место для неё, забирая его у области, отведённой для содержимого (помечена как «
content width» выше).Таким образом, без учёта полосы прокрутки ширина области содержимого (content width) будет
300px, но если предположить, что ширина полосы прокрутки равна 16px (её точное значение зависит от устройства и браузера), тогда остаётся только 300 - 16 = 284px, и мы должны это учитывать. Вот почему примеры в этой главе даны с полосой прокрутки. Без неё некоторые вычисления будут проще.#браузер #документ #размеры
👍3
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
Вот так выглядят свойства offsetParent, offsetLeft/Top
Подробное описание можете посмотреть постом выше: https://t.me/notesjs/367
#браузер #документ #размеры
Подробное описание можете посмотреть постом выше: https://t.me/notesjs/367
#браузер #документ #размеры
👍5
offsetWidth/Height
Теперь переходим к самому элементу.
Эти два свойства – самые простые. Они содержат «внешнюю» ширину/высоту элемента, то есть его полный размер, включая рамки.
Для нашего элемента:
-
-
#браузер #документ #размеры
Теперь переходим к самому элементу.
Эти два свойства – самые простые. Они содержат «внешнюю» ширину/высоту элемента, то есть его полный размер, включая рамки.
Для нашего элемента:
-
offsetWidth = 390 – внешняя ширина блока, её можно получить сложением CSS-ширины (300px), внутренних отступов (2 * 20px) и рамок (2 * 25px).-
offsetHeight = 290 – внешняя высота блока.#браузер #документ #размеры
👍4
Метрики для не показываемых элементов равны нулю.
Координаты и размеры в JavaScript устанавливаются только для видимых элементов.
Если элемент (или любой его родитель) имеет
Например, свойство
Мы можем использовать это, чтобы делать проверку на видимость.
Заметим, что функция
#браузер #документ #размеры
Координаты и размеры в JavaScript устанавливаются только для видимых элементов.
Если элемент (или любой его родитель) имеет
display:none или отсутствует в документе, то все его метрики равны нулю (или null, если это offsetParent).Например, свойство
offsetParent равно null, а offsetWidth и offsetHeight равны 0, когда мы создали элемент, но ещё не вставили его в документ, или если у элемента (или у его родителя) display:none.Мы можем использовать это, чтобы делать проверку на видимость.
Заметим, что функция
isHidden также вернёт true для элементов, которые в принципе показываются, но их размеры равны нулю (например, пустые <div>).#браузер #документ #размеры
👍4
clientTop/Left
Пойдём дальше. Внутри элемента у нас рамки (border).
Для них есть свойства-метрики
В нашем примере:
-
-
Но на самом деле эти свойства – вовсе не ширины рамок, а отступы внутренней части элемента от внешней.
#браузер #документ #размеры
Пойдём дальше. Внутри элемента у нас рамки (border).
Для них есть свойства-метрики
clientTop и clientLeft.В нашем примере:
-
clientLeft = 25 – ширина левой рамки-
clientTop = 25 – ширина верхней рамкиНо на самом деле эти свойства – вовсе не ширины рамок, а отступы внутренней части элемента от внешней.
#браузер #документ #размеры
👍5
scrollWidth/Height
Эти свойства – как
На рисунке выше:
-
-
Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту.
#браузер #документ #размеры
Эти свойства – как
clientWidth/clientHeight, но также включают в себя прокрученную (которую не видно) часть элемента.На рисунке выше:
-
scrollHeight = 723 – полная внутренняя высота, включая прокрученную область.-
scrollWidth = 324 – полная внутренняя ширина, в данном случае прокрутки нет, поэтому она равна clientWidth.Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту.
#браузер #документ #размеры
👍4🔥1
scrollLeft/scrollTop
Свойства
Следующая иллюстрация показывает значения
Другими словами, свойство
#браузер #документ #размеры
Свойства
scrollLeft/scrollTop – ширина/высота невидимой, прокрученной в данный момент, части элемента слева и сверху.Следующая иллюстрация показывает значения
scrollHeight и scrollTop для блока с вертикальной прокруткой.Другими словами, свойство
scrollTop – это «сколько уже прокручено вверх».#браузер #документ #размеры
👍3
Свойства scrollLeft/scrollTop можно изменять
В отличие от большинства свойств, которые доступны только для чтения, значения
При клике на следующий элемент будет выполняться код
Установка значения
#браузер #документ #размеры
В отличие от большинства свойств, которые доступны только для чтения, значения
scrollLeft/scrollTop можно изменять, и браузер выполнит прокрутку элемента.При клике на следующий элемент будет выполняться код
elem.scrollTop += 10. Поэтому он будет прокручиваться на 10px вниз.Установка значения
scrollTop на 0 или Infinity прокрутит элемент в самый верх/низ соответственно.#браузер #документ #размеры
👍6
Не window.innerWidth/Height
Браузеры также поддерживают свойства
Если есть полоса прокрутки, и она занимает какое-то место, то свойства
А
Если полоса прокрутки занимает некоторое место, то эти две строки выведут разные значения.
#браузер #документ #размеры
Браузеры также поддерживают свойства
window.innerWidth/innerHeight. Вроде бы, похоже на то, что нам нужно. Почему же не использовать их?Если есть полоса прокрутки, и она занимает какое-то место, то свойства
clientWidth/clientHeight указывают на ширину/высоту документа без неё (за её вычетом). Иными словами, они возвращают высоту/ширину видимой части документа, доступной для содержимого.А
window.innerWidth/innerHeight включают в себя полосу прокрутки.Если полоса прокрутки занимает некоторое место, то эти две строки выведут разные значения.
#браузер #документ #размеры
👍3
Ширина/высота документа
Теоретически, т.к. корневым элементом документа является
Но именно на этом элементе, для страницы в целом, эти свойства работают не так, как предполагается. В Chrome/Safari/Opera, если нет прокрутки, то
Чтобы надёжно получить полную высоту документа, нам следует взять максимальное из этих свойств.
#браузер #документ #размеры
Теоретически, т.к. корневым элементом документа является
documentElement, и он включает в себя всё содержимое, мы можем получить полный размер документа как documentElement.scrollWidth/scrollHeight.Но именно на этом элементе, для страницы в целом, эти свойства работают не так, как предполагается. В Chrome/Safari/Opera, если нет прокрутки, то
documentElement.scrollHeight может быть даже меньше, чем documentElement.clientHeight! С точки зрения элемента это невозможная ситуация.Чтобы надёжно получить полную высоту документа, нам следует взять максимальное из этих свойств.
#браузер #документ #размеры
👍4
Получение текущей прокрутки
Обычные элементы хранят текущее состояние прокрутки в
Что же со страницей? В большинстве браузеров мы можем обратиться к
К счастью, нам совсем не обязательно запоминать эти особенности, потому что текущую прокрутку можно прочитать из свойств
Эти свойства доступны только для чтения.
#браузер #документ #размеры
Обычные элементы хранят текущее состояние прокрутки в
elem.scrollLeft/scrollTop.Что же со страницей? В большинстве браузеров мы можем обратиться к
documentElement.scrollLeft/Top, за исключением основанных на старом WebKit (Safari), где есть ошибка (5991), и там нужно использовать document.body вместо document.documentElement.К счастью, нам совсем не обязательно запоминать эти особенности, потому что текущую прокрутку можно прочитать из свойств
window.pageXOffset/pageYOffsetЭти свойства доступны только для чтения.
#браузер #документ #размеры
👍2
Запретить прокрутку
Иногда нам нужно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.
Чтобы запретить прокрутку страницы, достаточно установить
Аналогичным образом мы можем «заморозить» прокрутку для других элементов, а не только для
Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место.
Это выглядит немного странно, но это можно обойти, если сравнить
#браузер #документ #размеры
Иногда нам нужно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.
Чтобы запретить прокрутку страницы, достаточно установить
document.body.style.overflow = "hidden".Аналогичным образом мы можем «заморозить» прокрутку для других элементов, а не только для
document.body.Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место.
Это выглядит немного странно, но это можно обойти, если сравнить
clientWidth до и после остановки, и если clientWidth увеличится (значит полоса прокрутки исчезла), то добавить padding в document.body вместо полосы прокрутки, чтобы оставить ширину содержимого прежней.#браузер #документ #размеры
👍9