Отсебятина Статьи Проекты
Облако тегов
Web CMS CSS htaccess HTML Javascript MySQL Php Безопасность Мониторы Новостная лента Оптимизация Ошибки Разработка сайта Часы Юзабилити оптимизация ошибки

Как найти длину и ширину элемента (блока)

Отсебятина от 22 августа 2009 года.    Теги: Javascript


На форумах очень часто всплывает подобный вопрос. Всплывает он из-за незнания свойств объекта Element. Но дело в том, что даже прочитав документацию, в голове может возникнуть путаница из-за обилия этих методов.




Введение. Ширина и высота элемента

Задав ширину элемента, можно ожидать, что изменяя внутренние отступы, мы просто изменим размер внутренней области элемента. Однако, это не так. Каждый отступ, будь то padding, margin или border, окружает элемент, увеличивая занимаемое им место, оставляя при этом незатронутым тело самого элемента:

<div style="width: 150px; height: 100px; border: 15px solid black; padding: 10px; background-color: #ebf4fa; margin: 10px;"></div>
ширина элемента (блока)
Аналогично и с высотой. Поэтому, прежде чем использовать JavaScript, нужно знать, какая именно ширина нам нужна — внутренней области элемента, с отступами/рамками или без них.

Для экспериментов создадим два блока:
  • Блок с вертикальной прокруткой и блоком внутри:
<div style="width: 250px; height: 100px; background-color: #ebf4fa; border: 15px solid black; padding: 10px; margin: 10px; overflow: auto;" id="first">
<div style="width: 150px; height: 200px; background-color: #f8f8f8; border: 15px solid #cfcfcf; padding: 10px; margin: 10px auto;" id="second"></div>
</div>

Span в div


  • Блок с текстовым блоком внутри:
<div style="width: 250px; height: 100px; background-color: #ebf4fa; border: 15px solid black; padding: 10px; margin: 10px; text-align: center;" id="third">
<span style="background-color: #f8f8f8; border: 15px solid #cfcfcf; padding: 10px; margin: 10px" id="fourth">my text</span>
</div>

Span в div


Свойства объекта Element

Количество свойств, отражающих метрику элемента, достаточно много — целых 12 штук. Делятся они на 3 группы:
  • 1) offset-свойства. Отражают смещения относительно родительского элемента, которым служит body [body = offsetParent] (для IE — родительский элемент [parentNode = offsetParent]).
  • 2) client-свойства. Отражают внутренние размеры элемента.
  • 3) scroll-свойства. Отражает или устанавливает количество прокрученных или видимых пикселей.
Следует отметить, что ни одно свойство не входит в стандарт w3c, а это значит, что каждый браузер может понимать его по-своему (или вообще не понимать). Некоторые свойства входят в спкцификацию MSIE DHTMLOM и Gecko.


Offset-свойства


offset sroll div

offset div
  • offsetTop - Расстояние от верхней границы рамки текущего элемента до верхней границы offsetParent (включая border body и padding body, margin body и margin текущего элемента)
    IE: Расстояние от верхней границы рамки текущего элемента до верхней границы offsetParent (включая padding offsetParent и margin текущего элемента)

  • offsetLeft - То же самое, что и offsetTop, только измеряет расстояние не от верха элементов, а от левых границ;

  • offsetHeight - Смещение контекста, вызванное элементом. Высота элемента (включая padding) + border;

  • offsetWidth - Смещение контекста, вызванное элементом. Ширина элемента (включая padding) + border.


Scroll-свойства:


scrolled sroll div

scroll div
  • scrollTop - Велечина прокрученной части элемента (скрытой) от верхней границы элемента, включая padding;
  • scrollLeft - Велечина прокрученной части элемента (скрытой) от левой границы элемента, включая padding;
  • scrollHeight - Высота элемента прокручиваемой части элемента. Включает тело элемента вместе с внутренними отступами (padding) и рамкой (border)*;
  • scrollWidth - Ширина элемента прокручиваемой части элемента. Включает тело элемента вместе с внутренними отступами (padding) и рамкой (border)*.
   * При отсутствии скролл-баров. При их присутствии border не учитывается.


client-свойства


client sroll div

client div
  • clientHeight, clientWidth — высота и ширина элемента с padding (без border, margin и полос прокрутки).

  • clientTop, clientLeft — отступ от границы элемента до границы рамки (border) элемента. Другими словами, ширина border + полосы прокрутки.

Стоит отметить, что client-свойства отражают установки CSS. Если размеры элемента (width & height & border) не заданы через CSS или атрибуты элемента, а определяются браузером, исходя из структуры страницы, то свойства равны 0.



Так чем же измерить размеры элемента?

Варианта 2:
  1. Если размеры элемента заданы стилями, то можно выбирать любое из *Height & *Width свойств, в зависимости, от того, какой размер нужно получить;
  2. Если размеры элемента не заданы и не интересует прокрутка, то offsetHeight & offsetWidth.
Оставить сообщение






Любое копирование должно сопровождаться ссылкой на сайт.
Если вам что-то не понравилось — сообщайте.
Кича Владимир
x
Мне не нравится этот сайт, удалить его