Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > координаты элемента относительно body


Автор: Ferromarron 30.6.2008, 18:41
Есть, к примеру, такой код страницы

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TITLE</title>

<style type="text/css">
body {margin:20px auto 0 auto; width:80%; height:600px; border:1px solid #000; position:relative;}
#parent {margin:5px; padding:20px; border:1px solid #000; position:relative;}
#block {margin:50px; padding:5px; border:1px solid #000;}
</style>

</head>
<body>
<div id="parent">
     <div id="block">text</div>
</div>
</body>
</html>


Как получить координаты элемента #block относительно body.

Пробовал с помощью такого скрипта
Код

  var element = document.getElementById('block');
  var left = element.offsetLeft;
  var top = element.offsetTop;
  for (var parent = element.offsetParent; parent; parent = parent.offsetParent)
  {
    left += parent.offsetLeft;
    top += parent.offsetTop;
  }
  alert(left+'   '+top);


IE считает относительно края страницы. Firefox от body. Opera в разных версиях по разному реагирует.

Автор: SelenIT 30.6.2008, 19:30
Явно проверять, что проверка дошла до body?
Код

  for (var parent = element.offsetParent; parent && parent.tagName.toLowerCase() != 'body'; parent = parent.offsetParent)


А вообще для чего такое понадобилось? Если для сопоставления с координатами мышки, то разве с ними не та же петрушка?

Автор: Ferromarron 4.7.2008, 20:02
В опере не работает.


Цитата(SelenIT @  30.6.2008,  19:30 Найти цитируемый пост)
А вообще для чего такое понадобилось?

скрипты разные (вроде тултипов, менюшек и т.п.) ищут координаты, а потом по ним позиционируют или сравнивают с шириной окна. А если body имеет стиль relative, то происходит смещение на его отступ.

Может есть какое-нибудь универсальное решение для определения этих отступов? 
В IE понятно.... а как в Operа и Mozillа.

Автор: Ghirik 5.7.2008, 03:04
Я бы может корректнее ответил, но пока вот. Посмотрите эту функцию:

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title block</title>
<style type="text/css">

</style>
<script type="text/javascript">
<!-- // --><![CDATA[

offset = function() { return { height: window.opera && document.documentElement.clientHeight < document.body.clientHeight ? document.body.clientHeight : document.documentElement.clientHeight, width: document.documentElement.clientWidth, scroll: document.documentElement.scrollTop }; };


// ]]>
</script>
</head>
<body>
<input type="button" value="Кнопка" onclick="alert(offset().height + '\n' + offset().width + '\n' + offset().scroll)">

</body>
</html>


Она возвращает кроссбраузерный вариант клиентской области и значение прокрутни документа.

Ну, думаю по алерту понято, как возвращаются эти значения.


P.S. Я умышленно выложил всю страницу, потому, как тип документа имеет большое значение. Но я не проверял. smile

Добавлено через 12 минут и 29 секунд
Ferromarron, ага, сейчас прочитал о чем Вы спросили. smile

Так то, вроде правильно ответил... Эта функция возвращает реальные значения клиентской области и значение скролла, которое при желании можно плюсануть. У меня были заморочки при соченении этого кода именно с Оперой, но в они здесь решены.

margin:5px; padding:20px; маринг поди поди боди, эти анекдоты нельзя свести к нулю? Дышать станет легче...

Автор: Ferromarron 5.7.2008, 06:26
Ghirik, для клиентской части окна я это скрипт использую - http://webew.ru/articles/152.webew - там не суть важно наличие доктайп.


Цитата(Ghirik @  5.7.2008,  03:04 Найти цитируемый пост)
маринг поди поди боди, эти анекдоты нельзя свести к нулю? Дышать станет легче...

в этом то и суть вопроса, когда body не на всю ширину окна растянут , без него я бы и темы не заводил.

Автор: Ghirik 5.7.2008, 06:39
Цитата

Ghirik, для клиентской части окна я это скрипт использую - http://webew.ru/articles/152.webew - там не суть важно наличие доктайп.


Если Вы хотите использовать document.documentElement то без определения типа документа вам не обойтись. Это проверено. Я Вам положил кроссбраузерный вариант взятия размеров, а тот, на который Вы показали не будет правильно работать в Опере.

Сейчас подумаю на счет body....

Автор: Ghirik 5.7.2008, 06:57
Вообще, при создании документа, обычно, выстраивают стратегический план, т.е., как бы некий подход которым в дальнейшем пользуются. Если Вы массированно используете CSS координирование объектов, то только бог вам поможет smile шучу конечно, но что-то в этом есть. На сколько мне известно, CSS не позволяет отслеживать динамику изменения размера окна, даже через расширения. Во всяком случае, я не видел реализаций, да и не искал... Но JavaScript-ом можно получить действующие значения стилей и не задумываться о реальных координатах объектов. Я вот только что по соседству выкладывал http://forum.vingrad.ru/index.php?showtopic=218492&view=findpost&p=1570340
Она позволит вам взять действующие значения координат body и div-а, ну а потом просто вычесть для получения относительных значений.

Добавлено через 7 минут и 7 секунд
Если что-то не получится - пишите... только покажите как Вы делали.

Автор: Ferromarron 5.7.2008, 07:33
Цитата(Ghirik @  5.7.2008,  06:57 Найти цитируемый пост)
JavaScript-ом можно получить действующие значения стилей

а какой стиль я должен искать? Я пробовал margin-ы - он мне и выдает как в стиле написано - 'auto'  smile 

походу лучший вариант будет не использовать ширину у body.

хотя для конкретного случая с равными отступами я уже придумал вариант: (ширину окна - ширина боди)/2 - это будет отступ слева и справа (при условии: ширину окна > ширина боди)

Цитата(Ghirik @  5.7.2008,  06:39 Найти цитируемый пост)
Это проверено

не понимаю, где там проблема в опере - размеры окна считает как с доктайпом, так и без него - разницы не замечаю (в последних версиях, по крайней мере)

Автор: Ghirik 5.7.2008, 07:40
Цитата

не понимаю, где там проблема в опере - размеры окна считает как с доктайпом, так и без него - разницы не замечаю (в последних версиях, по крайней мере) 

Да, да... Сейчас из за этого и зашел снова на форум.. Там полностью корректная, кроссбраузерная функция.... Я с налету не догледел. Видимо умного изображал smile

Сейчас нарисую как брать размеры...

Добавлено через 5 минут и 41 секунду
Да чего собственно рисовать то, если у вас получается взять auto, значит функцию Вы применяете правильно. Но просто бериете offsetTop и offsetLeft объекта.

Добавлено через 13 минут и 56 секунд
Цитата

Может есть какое-нибудь универсальное решение для определения этих отступов?


Вот точно... Прочитал всю ветку...  smile  Эта моя функция как раз для решения таких заморочек.... smile

Автор: Ferromarron 5.7.2008, 08:12
Цитата(Ghirik @  5.7.2008,  07:40 Найти цитируемый пост)
Но просто бериете offsetTop и offsetLeft объекта.

offsetTop и offsetLeft с этой функцией вообще никак не вяжутся. Они не являются текущими стилями, т.е. 'undefined'  smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)