Javascript-форум - Вопрос: И опять про offsetLeft...

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Вопрос: И опять про offsetLeft... (https://javascript.ru/forum/misc/83-vopros-i-opyat-pro-offsetleft.html)

Вопрос: И опять про offsetLeft...

Сорри, если повторю уже много раз задаваемый вопрос. Стоит задача далеко не новая - определить координаты элемента на странице. Результаты поиска по форумам, инету, да и просто текущая рабочая версия сводятся к простому проходу по цепочке offsetParent до BODY с суммированием offsetLeft и offsetTop. Это уже много раз было, много раз проходилось и т.д. и т.п. и см. на обороте.

А теперь имеем страницу:

<div style="width: 500px; border: solid 1px red; padding: 10px;">
  <div id="inner" style="border: solid 1px green;">
    <a href="/">
      <img [b]align="right"[/b] id="testimg" height="15" width="15" src="myimage.jpg" border="0" />
    </a>
Текст текст текст текст текст текст текст 
текст текст текст текст текст текст текст 
текст текст текст текст текст текст текст 
текст текст текст текст текст текст текст 
текст текст текст текст текст 
  </div>
</div>
<script>
window.onload = function () {
  var obDiv = document.getElementById('inner');
  alert(obDiv.[b]offsetLeft[/b]);
}
</script>

FF, Opera, Safari выдают правильные значения, а вот IE всех доступных под рукой версий выдает в качестве значения offsetLeft отступ от первого дочернего элемента, то есть, от спозиционированной по правому краю картинки.

Есть предолжения, что с этим делать?

в IE в quirks mode другая модель боксовая.. Может в этом дело

Да , IE в своем репертуаре. Для него можно использовать getBoundingClientRect().

var obj = obDiv.getBoundingClientRect();
var left = obj.left;

Только там кажется координаты на 2 пикселя смещены. getBoundingClientRect Method (A, ABBR, ACRONYM, ...)

Ок, спасибо, попробую...

Супер, работает! ;-)

Ой, спасибо, тоже искал! Все перепробовал! Решил уж перебирать parentElement до самого <body>

Только вот Опера не хочет с этой функцией работать... при выполнении строчки вызова getBoundingClientRect() для объекта выходит из функции :-((

Короче, че американцу хорошо,то норвежцу - плохо. и наоборот

здравствуйте. ситуация наоборот поставил скрипт календаря, он в ИЕ появляется по месту клика, а в мозиле и хроме в левом углу сверху.
Что нужно изменить? или дописать, чтоб біла кросс-браузерность

function Left(obj)
{ var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function Top(obj)
{ var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}

Как раз недавно юзал этот календарь, везде всё нормально с кординатами, дело в другом.

Там есть такая функция "lcs", а в ней есть пару строчек:

getObj('fc').style.left=Left(ielem);
	getObj('fc').style.top=Top(ielem)+ielem.offsetHeight;

Как видно скрипт старый и разработчик не грамотный, при нормальном доктайпе это не работает.
Должно быть хотя бы так:

getObj('fc').style.left=Left(ielem)+'px';
	getObj('fc').style.top=Top(ielem)+ielem.offsetHeight+'px';

Хотя лучше всего взять и переписать календарь под себя, честно слово, код ужасный.

П.С. Вот ещё статейка для общего понимания: Координаты элемента на странице

Огромное спасибо, с сожалению под себя переписать не умею, поєтому твое исправление помогло. спасибо

будет выдавать одинаковые значения если сделать так
<div style="position: relative; width: 500px; border: solid 1px red; padding: 10px;">
<div id="inner" style="position: absolute; border: solid 1px green;">