Javascript-форум - setPosition (яваскрипт) - не нашел по функции информации в интернете

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

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

- - setPosition (яваскрипт) - не нашел по функции информации в интернете (https://javascript.ru/forum/misc/44770-setposition-yavaskript-ne-nashel-po-funkcii-informacii-v-internete.html)

setPosition (яваскрипт) - не нашел по функции информации в интернете

1 вопрос:

setPosition (яваскрипт) - не нашел по функции информации в интернете, подскажите как работает функция, каждую строчку, вот функ.:

function setPosition(obj, x, y) {
obj.style.left = x+'px';
obj.style.top = y+'px';
}

obj - как я понял это объект(класс), объясните толком что это.

2 вопрос:

Вот код:

<html>
<head>
<link rel="stylesheet" type="text/css" href="11.css">

<script>
var img = document.getElementById('test'),
defX = 50, defY = 50;

document.body.onclick = function(event) {
setPosition(img, event.clientX, event.clientY);
}

document.getElementById("returnBtn").onclick = function(event) {
event.stopPropagation();
setPosition(img, defX, defY);
}

function setPosition(obj, x, y) {
obj.style.left = x+'px';
obj.style.top = y+'px';
}
</script>
</head>
<body>
<button id='returnBtn'>return</button>
<img id='test' src='1.jpg'/>
</body>
</html>

как правильно переделать чтоб работало?
этот код взят отсюда: http://www.cyberforum.ru/javascript/thread409453.html

Про DOM читал, пока до конца не разобрался, в этой ссылке написано: Скрипт разместите после тега <img/>, как я понял после строчки:
<img id='test' src='1.jpg'/> - так тоже не работает. Подскажите как правильно? Полный код пожалуйста, за ранее спасибо.

На этой ссылке есть архив с правильным кодом, скачал, но или открываю архив не правильно или в нем нет инфы полной. Подскажите как правильно открыть архив?

Цитата:

Сообщение от wadim

подскажите как работает функция, каждую строчку, вот функ.:

function setPosition(obj, x, y) {
    obj.style.left = x+'px';
    obj.style.top = y+'px';
}

obj.style.left = x+'px';

Меняется свойство left
http://htmlbook.ru/css/left

obj.style.top = y+'px';

Меняется свойство top...
http://htmlbook.ru/css/top

Цитата:

Сообщение от wadim

Подскажите как правильно? Полный код пожалуйста

Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html,
body {
	width: 100%;
	height: 100%;
}
#test {
	position: absolute;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<button id='returnBtn'>return</button>
<img id='test' src='http://javascript.ru/forum/images/smilies/smile.gif'/ >
<script type="text/javascript">
var img = document.getElementById('test'), defX = 50, defY = 50;
document.body.onclick = function(event) {
	setPosition(img, event.clientX, event.clientY);
};
document.getElementById("returnBtn").onclick = function(event) {
	event.stopPropagation();
	setPosition(img, defX, defY);
};
function setPosition(obj, x, y) {
	obj.style.left = x+'px';
	obj.style.top = y+'px';
};
setPosition(img, defX, defY);
</script>
</body>
</html>

Цитата:

Сообщение от wadim

obj - как я понял это объект(класс), объясните толком что это.

Это объект документа который тоже объект. Поэтому про объекты документа говорят - элементы.

left - свойство объекта style, который в свою очередь свойство объекта элемент, который свойство объекта документ и вообще в js нет ничего кроме профтыканны друг в друга пропертей которые могу быть чем угодно, потому что все они типа объекты.

Спасибо всем за ответы.