JS получает OffsetTotop, OffSetSetleft и другие свойства элемента
obj.clientWidth // Получить ширину элемента
obj.clientHeight // высота элемента
obj.offsetleft // элемент относительно слева от родительского элемента
obj.offsettop // вершина элемента относительно родительского элемента
obj.offsetwidth // ширина элемента
obj.offsetheight // высота элемента
разница:
ClientWidth = ширина + прокладка
ClientHeight = высота + прокладка
OffsetWidth = ширина + накладка + граница
offsetheight = width + padding + граница
Offset имеет большую ширину границы, чем клиент
// Получить горизонтальную координату функции элемента (относительно окна) getTop (e) {var offset = e.offsettop; if (e.offsetparent! = null) offset+= getTop (E.OffSetParent); return offset;} // Получить горизонтальную координату функции элемента (относительно окна) getleft (e) {var offset = e.offsetleft; if (e.offsetparent! = null) offset+= getleft (e.oftsetparent); вернуть смещение;}Я также написал статью JS о получении местоположений элементов: JS получает Element's OffsetTop, OffSetleft и другие атрибуты. Мы можем получить позицию элемента относительно окна через атрибуты OffSetTop и Offsetleft, но атрибуты OffSetTotop и OffSeteleft расположены по сравнению с родительским элементом, а элементы, которые обычно необходимы для получения положения, не являются на внешнем слое, поэтому связанные с смещением атрибуты, которые проходят верхний элемент. Тогда эффективность становится проблемой.
// Получите горизонтальную координату функции элемента (относительно окна) getTop (e) {var offset = e.offsettop; if (e.oftsetparent! = Null) offset+= getTop (e.offsetParent); вернуть смещение;} // Получить горизонтальную координату элемента (относительно окна) getleft (e) {var var war war offset = e.offsetleft; if (e.offsetparent! = null) offset+= getleft (e.oftsetparent); return offset;}К счастью, браузер предоставил мне соответствующий интерфейс GetBoundingClientRect. Этот метод впервые появился в браузере IE. Более поздние браузеры также поддержали этот метод, и он был более идеальным. В т.е. они могут получить только левые, верхние, нижние и правые атрибуты элементов, а более поздние современные браузеры также могут получить ширину и ширину элементов.
| Хром | Firefox (гекко) | Internet Explorer | Опера | Сафари |
|---|---|---|---|---|
| 1.0 | 3.0 (1,9) | 4.0 | (Да) | 4.0 |
Здесь следует отметить, что внизу находится расстояние между нижней частью элемента и верхней частью окна, а не нижняя часть положения в CSS относительно нижней части окна. Точно так же атрибут RIHGT - это расстояние между самой правой элементом и левой стороной окна.
var box = document.getElementById ("box"); var pos = box.getBoundingClientRect (); box.innerhtml = "top:"+pos.top+"слева:"+pos.left+"внизу:"+pos.bottom+"справа:"+posright+"width:"+width+"height:"+pos.he.Оригинальные статьи, пожалуйста, укажите перепечатку: перепечатано из фронтальной разработки