Как найти длину и ширину элемента (блока)Отсебятина от 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>
- Блок с текстовым блоком внутри:
<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>
Количество свойств, отражающих метрику элемента, достаточно много — целых 12 штук. Делятся они на 3 группы:
- 1) offset-свойства. Отражают смещения относительно родительского элемента, которым служит body [body = offsetParent] (для IE — родительский элемент [parentNode = offsetParent]).
- 2) client-свойства. Отражают внутренние размеры элемента.
- 3) scroll-свойства. Отражает или устанавливает количество прокрученных или видимых пикселей.
Следует отметить, что ни одно свойство не входит в стандарт w3c, а это значит, что каждый браузер может понимать его по-своему (или вообще не понимать). Некоторые свойства входят в спкцификацию MSIE DHTMLOM и Gecko.
- offsetTop - Расстояние от верхней границы рамки текущего элемента до верхней границы offsetParent (включая border body и padding body, margin body и margin текущего элемента)
IE: Расстояние от верхней границы рамки текущего элемента до верхней границы offsetParent (включая padding offsetParent и margin текущего элемента)
- offsetLeft - То же самое, что и offsetTop, только измеряет расстояние не от верха элементов, а от левых границ;
- offsetHeight - Смещение контекста, вызванное элементом. Высота элемента (включая padding) + border;
- offsetWidth - Смещение контекста, вызванное элементом. Ширина элемента (включая padding) + border.
- scrollTop - Велечина прокрученной части элемента (скрытой) от верхней границы элемента, включая padding;
- scrollLeft - Велечина прокрученной части элемента (скрытой) от левой границы элемента, включая padding;
- scrollHeight - Высота элемента прокручиваемой части элемента. Включает тело элемента вместе с внутренними отступами (padding) и рамкой (border)*;
- scrollWidth - Ширина элемента прокручиваемой части элемента. Включает тело элемента вместе с внутренними отступами (padding) и рамкой (border)*.
* При отсутствии скролл-баров. При их присутствии border не учитывается.
- clientHeight, clientWidth — высота и ширина элемента с padding (без border, margin и полос прокрутки).
- clientTop, clientLeft — отступ от границы элемента до границы рамки (border) элемента. Другими словами, ширина border + полосы прокрутки.
Стоит отметить, что client-свойства отражают установки CSS. Если размеры элемента (width & height & border) не заданы через CSS или атрибуты элемента, а определяются браузером, исходя из структуры страницы, то свойства равны 0.
Варианта 2:
- Если размеры элемента заданы стилями, то можно выбирать любое из *Height & *Width свойств, в зависимости, от того, какой размер нужно получить;
- Если размеры элемента не заданы и не интересует прокрутка, то offsetHeight & offsetWidth.
|