js: ак узнать положение левого края объекта

[Naydav]

<div id="newobj"></div>

<script>
var newobj = GetElementById("newobj");
</script>

Как узнать положение левого края объекта "newobj"
(от левого края экрана, типа Left )

в стилях "newobj" изначально ничего не указано...

[spider-intruder]

Тип обьекта какой? Кнопка?

[Naydav]

Тип обьекта какой? Кнопка?

<div id="newobj"></div>

[spider-intruder]

b=getElementById("Buttonchik");
alert(b.style.top);
alert(b.style.left);

дело в том что если свойство position не absolute то top и left считаются от контейнера в который вложен обьект.

[spider-intruder]

http://www.quirksmode.org/js/findpos.html

[Naydav]

b=getElementById("Buttonchik");
alert(b.style.top);
alert(b.style.left);

дело в том что если свойство position не absolute то top и left считаются от контейнера в который вложен обьект.

<script>
var newobj = document.getElementById("newobj");
document.write(newobj.left);
</script>

<div id="newobj"></div>

alert(newobj.style.top); - вообще ничего не выведет, так в style ничего не указано, я же писал

[Naydav]

все разобрался

document.write(newobjs.offsetLeft);

[Helios]

Для таких случаев, когда не знаешь, какие поля объекта определены:


var obj = document.getElementById('myobj');

for(i in obj)
{
docunent.write('obj.' + i + ' = ' + obj[i] + '<br />');
}

Сей нехитрый скриптец выведет всю инфу о конкретном элементе

[Naydav]

function getBounds(element)
{
var left = element.offsetLeft;
var top = element.offsetTop;
for (var parent = element.offsetParent; parent; parent = parent.offsetParent)
{
left += parent.offsetLeft - parent.scrollLeft;
top += parent.offsetTop - parent.scrollTop
}
return {left: left, top: top, width: element.offsetWidth, height: element.offsetHeight};
}

left_ = getBounds(block1);

document.write(left_.left);


В ИЕ вадает -1...

так же как и block1.offsetLeft

и что нужно ие?

не работает когда див находиться в таблице в ячейке

пс getBoundingClientRect - тоже не работает

[Naydav]

Полный листинг - в ИЕ не работает :(
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>

<div id="block2" style="position: absolute; left:0px; top:0px;">block2</div>
<div id="block1" style="margin-left: 230px;">


<script>
var block1 = document.getElementById("block1");
var block2 = document.getElementById("block2");

function getBounds(element)
{
var left = element.offsetLeft;
var top = element.offsetTop;
for (var parent = element.offsetParent; parent; parent = parent.offsetParent)
{
left += parent.offsetLeft - parent.scrollLeft;
top += parent.offsetTop - parent.scrollTop
}
return {left: left, top: top, width: element.offsetWidth, height: element.offsetHeight};
}

var bounds = getBounds(block1);
alert('Coord: ' +
'(' + bounds.left + ',' + bounds.top + ') x ' +
'(' + bounds.width + ',' + bounds.height + ')');


//block2.style.left = '500';
//block2.style.left = block1.offsetLeft+'px';
//block2.style.top = block1.offsetTop+'px';
block2.style.left = bounds.left;
block2.style.top = bounds.top;
</script>


</td>
</tr>
</table>

[Helios]

Можешь заюзать фреймворк mootools:
А именно:
http://docs.mootools.net/Element/Element-Dimensions.js