Размер
В HTML размеры элементов или расстояния между ними задаются в пикселах или процентах. Пиксел — это элементарная точка на экране монитора, является относительной единицей измерения, ее величина зависит от установленного экранного разрешения и размера монитора. Возьмем, к примеру, популярное разрешение монитора 1024х768 пикселов. Картинка с такими же размерами будет занимать всю область экрана. Увеличив разрешение монитора до 1280х1024, мы, тем самым, уменьшим размеры изображения на экране.
Пример 6.2. Размеры изображения в пикселах
В данном примере рисунок имеет ширину 100 пикселов ( width=»100″ ), высоту 111 пикселов ( height=»111″ ), горизонтальный и вертикальный отступ по 4 пиксела ( hspace и vspace ) и толщину границы вокруг картинки 2 пиксела ( border=»2″ ).
Размеры допустимо задавать только в целых числах. Это правило относится как к пикселам, так и процентам.
Учтите, что размер в процентах вычисляется от размеров родительского элемента, иными словами, контейнера, внутри которого располагается элемент. Если родитель явно не задан, тогда за отсчет принимается окно браузера. В примере 6.3 приведен код веб-страницы, в котором ширина элементов задается в процентах.
Пример 6.3. Размеры изображения в процентах
В данном примере ширина картинки задана как 100%, при этом высота изображения явно не задается, поскольку она вычисляется автоматически. Вид страницы при таких размерах картинки показан на рис. 6.3.
Рис. 6.3. Изображение с шириной 100%
Обратите внимание, что в изображении появляются заметные искажения, это связано с увеличением картинки вопреки ее исходным размерам.
Как вы понимаете, ширина окна принимается за 100%, но ее легко превысить, причем ненароком. В частности, стоит только добавить в примере 6.3 к тегу отступы по горизонтали ( hspace=»10″ ) и ширина изображения станет 100%+20. Это в свою очередь приведет к появлению горизонтальной полосы прокрутки. Учитывайте этот нюанс при установке размеров элементов.
Размеры и прокрутка элементов
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/size-and-scroll.
Для того, чтобы показывать элементы на произвольных местах страницы, необходимо во-первых, знать CSS-позиционирование, а во-вторых – уметь работать с «геометрией элементов» из JavaScript.
В этой главе мы поговорим о размерах элементов DOM, способах их вычисления и метриках – различных свойствах, которые содержат эту информацию.
Образец документа
Мы будем использовать для примера вот такой элемент, у которого есть рамка (border), поля (padding), и прокрутка:
Результат выглядит так:
В иллюстрации выше намеренно продемонстрирован самый сложный и полный случай, когда у элемента есть ещё и полоса прокрутки.
В этом случае полоса прокрутки «отодвигает» содержимое вместе с padding влево, отбирая у него место.
Мы должны в точности понимать, что происходит с размерами элемента при наличии полосы прокрутки, поэтому на картинке выше это отражено.
На рисунке выше поля padding изображены пустыми, но текст там вполне может быть, к примеру, при наличии вертикальной прокрутки.
Метрики
У элементов существует ряд свойств, содержащих их внешние и внутренние размеры. Мы будем называть их «метриками».
Метрики, в отличие от свойств CSS, содержат числа, всегда в пикселях и без единиц измерения на конце.
На картинке все они с трудом помещаются, но, как мы увидим далее, их значения просты и понятны.
Будем исследовать их снаружи элемента и вовнутрь.
offsetParent, offsetLeft/Top
Ситуации, когда эти свойства нужны, можно перечислить по пальцам. Они возникают действительно редко. Как правило, эти свойства используют, потому что не знают средств правильной работы с координатами, о которых мы поговорим позже.
Несмотря на то, что эти свойства нужны реже всего, они – самые «внешние», поэтому начнём с них.
В offsetParent находится ссылка на родительский элемент в смысле отображения на странице.
Уточним, что имеется в виду.
Когда браузер рисует страницу, то он высчитывает дерево расположения элементов, иначе говоря «дерево геометрии» или «дерево рендеринга», которое содержит всю информацию о размерах.
В примере ниже внутренний
offsetWidth/Height
Теперь переходим к самому элементу.
Для нашего элемента:
Координаты и размеры в JavaScript устанавливаются только для видимых элементов.
Это даёт нам замечательный способ для проверки, виден ли элемент:
clientTop/Left
…Но на самом деле они – вовсе не рамки, а отступ внутренней части элемента от внешней.
Она возникает тогда, когда документ располагается справа налево (операционная система на арабском языке или иврите). Полоса прокрутки в этом случае находится слева, и тогда свойство clientLeft включает в себя ещё и ширину полосы прокрутки.
clientWidth/Height
Если padding нет, то clientWidth/Height в точности равны размеру области содержимого, внутри рамок и полосы прокрутки.
Поэтому в тех случаях, когда мы точно знаем, что padding нет, их используют для определения внутренних размеров элемента.
scrollWidth/Height
Свойства clientWidth/clientHeight относятся только к видимой области элемента, а scrollWidth/scrollHeight добавляют к ней прокрученную (которую не видно) по горизонтали/вертикали.
Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту, таким кодом:
Нажмите на кнопку, чтобы распахнуть элемент:
element.style.height = element.scrollHeight + „px“
scrollLeft/scrollTop
Свойства scrollLeft/scrollTop – ширина/высота невидимой, прокрученной в данный момент, части элемента слева и сверху.
Следующая иллюстрация показывает значения scrollHeight и scrollTop для блока с вертикальной прокруткой.
В отличие от большинства свойств, которые доступны только для чтения, значения scrollLeft/scrollTop можно изменить, и браузер выполнит прокрутку элемента.
Не стоит брать width/height из CSS
Мы рассмотрели метрики – свойства, которые есть у DOM-элементов. Их обычно используют для получения их различных высот, ширин и прочих расстояний.
Теперь несколько слов о том, как не надо делать.
Получение ширины элемента может быть таким:
Не лучше ли получать ширину так, вместо метрик? Вовсе нет!
Конечно, с точки зрения CSS размер auto – совершенно нормально, но нам-то в JavaScript нужен конкретный размер в пикселях, который мы могли бы использовать для вычислений. Получается, что в данном случае ширина width из CSS вообще бесполезна.
Есть и ещё одна причина.
Полоса прокрутки – причина многих проблем и недопониманий. Как говорится, «дьявол кроется в деталях». Недопустимо, чтобы наш код работал на элементах без прокрутки и начинал «глючить» с ней.
Как мы говорили ранее, при наличии вертикальной полосы прокрутки, в зависимости от браузера, устройства и операционной системы, она может сдвинуть содержимое.
Если ваш браузер показывает полосу прокрутки (например, под Windows почти все браузеры так делают), то вы можете протестировать это сами, нажав на кнопку в ифрейме ниже.
Описанные разночтения касаются только чтения свойства getComputedStyle(. ).width из JavaScript, визуальное отображение корректно в обоих случаях.
Итого
У элементов есть следующие метрики:
Как узнать размер элемента страницы сайта в браузере?
Вы когда-нибудь пытались узнать размеры какого-нибудь элемента страницы сайта в браузере (размеры баннера, ширину или высоту блока) и т.д.? Если вам приходится решать подобные задачи, то эта публикация для вас.
Согласитесь, делать измерения объекта на экране компьютера, довольно неудобно. Конечно, есть специальный софт, например, экранные линейки, которые позволяют делать измерения объектов. Но сегодня речь пойдет именно об определении размеров элементов любого сайта, который мы можем открыть в браузере и сделать необходимые измерения средствами самого браузера.
В современные популярные браузеры встроены средства для веб-разработчика. Рассмотрим использование таких средств на примере браузеров Google Chrome и Яндекс браузера, т.к. они практически идентичны.
Средства веб-разработчика в браузере
Чтобы исследовать какой-либо объект открытой страницы сайта, нужно щелкнуть по нему правой кнопкой мыши и найти в контекстном меню пункт «Просмотр кода элемента» (в других браузерах формулировка может отличаться). В нижней части окна откроется панелька средств для веб-разработчика. Автоматически в коде будет выделен тот элемент, по которому вы щелкали. Наведя указатель мыши на выделенный код, на странице сайта будет выделяться и сам объект, который задается кодом, на который вы навели указатель мыши. Если объект автоматически был определен некорректно, то вам нужно навести указатель на соседние строки и уточнить необходимый вам элемент.
Под выделенными на экране элементами, найденными таким образом, будут отображаться их размеры. В общем описывать все немного запутанно получилось. Лучше смотрите видео-инструкцию. Все очень просто 😉
Как получить фактическую ширину и высоту элемента HTML?
предположим, что у меня есть
что я должен использовать? Просьба включить информацию о совместимости браузеров.
12 ответов
var width = document.getElementById(‘foo’).offsetWidth;
IE8 Примечание: getBoundingClientRect не возвращает высоту и ширину на IE8 и ниже.*
стоит отметить, что объект, возвращаемый этим методом, на самом деле не является нормальный
Примечание: этот ответ был написан в 2008 году. В то время лучшим кросс-браузерным решением для большинства людей действительно было использование jQuery. Я оставляю ответ здесь для потомков, и если вы используете jQuery, это хороший способ сделать это. Если вы используете какую-то другую структуру или чистый JavaScript, принятый ответ, вероятно, является способом.
на всякий случай, если это кому-то полезно, я поставил текстовое поле, кнопку и div все с тем же css:
вам нужно только вычислить его для IE7 и старше (и только если ваш контент не имеет фиксированного размера). Я предлагаю использовать условные комментарии HTML для ограничения взлома старых IEs, которые не поддерживают CSS2. Для всех других браузеров используйте это:
Это идеальное решение. Он центрирует
offsetWidth и offsetHeight возвращает «общий объем пространства, занимаемого элементом, включая ширину видимого содержимого, полосы прокрутки (если таковые имеются), заполнение и границу»
clientWidth и clientHeight return «сколько места занимает фактическое отображаемое содержимое, включая заполнение, но не включая границу, поля или полосы прокрутки»
scrollWidth и scrollHeight возврат » фактического размера содержания, независимо от того, сколько из него в настоящее время видно»
таким образом, это зависит от того, ожидается ли измеренное содержимое из текущей видимой области.
элемент.offsetWidth и элемент.offsetHeight должны сделать, как предложено в предыдущем посте.
однако, если вы просто хотите центрировать контент, есть лучший способ сделать это. Предполагая, что вы используете XHTML strict DOCTYPE. установите поле: 0, свойство auto и требуемую ширину в px для тега body. Содержимое выравнивается по центру страницы.
легко изменить стили элементов, но довольно сложно прочитать значение.
JavaScript не может прочитать свойство стиля элемента (elem.стиль), исходящий из css (внутренний/внешний), если вы не используете встроенный вызов метода getComputedStyle в javascript.
элемент: элемент для чтения значения.
псевдо: псевдо-элемент, если требуется, для пример:: раньше. Пустая строка или нет аргумента означает сам элемент.
результатом является объект со свойствами стиля, например elem.стиль, но теперь по отношению ко всем классам css.
например, здесь style не видит поля:
таким образом, изменил код javaScript, чтобы включить getComputedStyle элемента, который вы хотите получить, это ширина / высота или другой атрибут
компьютерная и решен значения
в CSS есть два понятия:
вычисленное значение стиля-это значение после всех правил CSS и CSS наследование применяется в результате каскада CSS. Это может выглядеть как высота: 1em или размер шрифта: 125%.
разрешенное значение стиля-это то, которое, наконец, применяется к элементу. Значения типа 1em или 125% относительны. Браузер принимает вычисленное value и делает все единицы фиксированными и абсолютными, например: высота:20 пикселей или размер шрифта: 16px. Для свойств геометрии разрешенные значения может иметь плавающую точку, например width: 50.5 px.
давным-давно getComputedStyle был создан для получения вычисленных значений, но оказалось, что разрешенные значения гораздо удобнее, и стандарт изменился.
Таким образом, в настоящее время getComputedStyle фактически возвращает разрешенное значение свойства.
Обратите Внимание:
getComputedStyle требуется полное имя свойства
вы всегда должны спрашивать точное свойство, которое вы хотите, например paddingLeft или высота или ширина. В противном случае правильный результат не гарантирован.
например, если есть свойства paddingLeft/ paddingTop, то что мы должны получить для getComputedStyle (elem).обивка? Ничего, или может быть,» сгенерированное » значение из известных прокладок? Нет стандарта здесь править.
там другие нестыковки. Например, некоторые браузеры (Chrome) показывают 10px в документе ниже, а некоторые из них (Firefox) – нет:
Получение размера и положения элемента в JavaScript DOM
getBoundingClientRect – это часть JavaScript DOM, которая предоставляет важные данные о размере и расположении HTML-элемента.
Читайте также: Основы DOM
В этом мануале вы научитесь использовать getBoundingClientRect, чтобы получить размер и положение необходимого вам элемента.
Требования
Чтобы выполнить это руководство, вы должны ознакомиться со следующими статьями:
Как работает getBoundingClientRect()
Чтобы использовать метод getBoundingClientRect, сначала выберите HTML-элемент, а затем вызовите getBoundingClientRect для этого элемента:
Метод getBoundingClientRect возвращает объект с несколькими парами ключ-значение, которые предоставляют информацию о размере и расположении элемента на веб-странице. Вывод выглядит так:
<
top: 450,
left: 400,
right: 825,
bottom: 500,
x: 400,
y: 450,
width: 425,
height: 50
>
Значения x и y будут отвечать значениям left и top. Поэтому некоторые браузеры пропускают x и y и выдают только left и top.
Еще одна вещь, на которую следует обратить внимание, – это то, что значения right/bottom могут отличаться от того, что вы привыкли видеть при позиционировании CSS (например, при использовании position: absolute).
Теперь, когда вы ознакомлены с выводом getBoundingClientRect(), давайте попробуем выполнить один пример, чтобы разобраться со всем на практике.
Метод getBoundingClientRect в приложении
Чтобы использовать getBoundingClientRect в своем коде, вам понадобится HTML-документ с элементом, который вы хотите запросить.
Создайте в текстовом редакторе новый HTML-файл по имени boundingbox.html:
В этом файле создайте HTML-документ, содержащий тег
