Форум

Jekel · #1 (**permalink**) 29.12.2009, 05:20

Есть html страничка с изображением и его id="pic".

<html>
<head>
<title>Engine</title>
<script type="text/javascript" language="javascript" src="engine.js"></script>
</head>
<body onLoad="first()">
<img src="box.gif" id="pic" style="position: absolute; left:100; top:100"></img>
</body>
</html>

С помощью этого js нужно поменять style изображения на html страничке. А именно его left и top (увеличить их на 100 и 200).
Полученые данные в var top и var left выглядят так: 100px
цифра с приставкой 'px', тоесть с ней я не могу добавить к top или left другое число...

function first(){
	// Получаем нынешнее значение top изображения
	var top = document.getElementById("pic").style.top;
	// Получаем нынешнее значение left изображения
	var left = document.getElementById("pic").style.left;
	// Меняем src изображения
    document.getElementById("pic").src="circle.gif";
	// Меняем style изображения, нужно добавить к left 100 и к top 200
	document.getElementById("pic").style="position: absolute; left:" + (left+100) + "; top:" + (top+200) + "";
}

сейчас выходит так:

var top = 100px;
document.getElementById("pic").style="position: absolute; top:" + (100px+200) + "";

Выходит что код картинки будет таков:

<img src="box.gif" id="pic" style="position: absolute; left:100; top:100px100"></img>

Как это решить?

И как эти два действия слить в один?

document.getElementById("pic").src="circle.gif";	
document.getElementById("pic").style="position: absolute; left:" + (left+100) + "; top:" + (top+200) + "";

Как-то так...но так не работает:

document.getElementById("pic").src="circle.gif".style="position: absolute; left:" + (left+100) + "; top:" + (top+200) + "";

Kolyaj · #2 (**permalink**) 29.12.2009, 09:32

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

Как это решить?

parseInt

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

И как эти два действия слить в один?

Зачем?

Jekel · #3 (**permalink**) 29.12.2009, 15:39

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

Kolyaj · #4 (**permalink**) 29.12.2009, 15:51

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

А ParseInt пример можно на базе моего кода?

Привести значение стиля к числу, прибавить 100 и дописать 'px'.

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

для сокращения количества кода? можно так сделать?

Закешировать значение getElementById.

Jekel · #5 (**permalink**) 29.12.2009, 16:03

пожалуйста, поменяй код..я так не доганяю ничего)

PeaceCoder · #6 (**permalink**) 29.12.2009, 19:48

var el = document.getElementById('pic');
el.src="circle.gif";
var top = el.style.top, left=el.style.left; //тут будут, например 100px
top = parseInt(top); // теперь будет 100 без 'px'
left = parseInt(left);
el.style.top = (top+100)+'px'; // css требудет указания размерности
el.style.left = (left+100)+'px';

обьединить не получится. т.к. ты работаешь на разных уровнях свойств обьекта и к томуже операции присваивания возвращают не обьект, а результат присваивания.

Jekel · #7 (**permalink**) 29.12.2009, 19:49

Спасибище, теперь понял

serega_dgl · #8 (**permalink**) 09.11.2018, 17:24

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

Есть html страничка с изображением и его id="pic".

<html>
<head>
<title>Engine</title>
<script type="text/javascript" language="javascript" src="engine.js"></script>
</head>
<body onLoad="first()">
<img src="box.gif" id="pic" style="position: absolute; left:100; top:100"></img>
</body>
</html>

С помощью этого js нужно поменять атрибут lang изображения на html страничке. А именно его left и top (увеличить их на 100 и 200).
Полученые данные в var top и var left выглядят так: 100px
цифра с приставкой 'px', тоесть с ней я не могу добавить к top или left другое число...

function first(){
	// Получаем нынешнее значение 
	var top = document.getElementById("pic").style.top;
	// Получаем нынешнее значение left изображения
	var left = document.getElementById("pic").style.left;
	// Меняем src изображения
    document.getElementById("pic").src="circle.gif";
	// Меняем style изображения, нужно добавить к left 100 и к top 200
	document.getElementById("pic").style="position: absolute; left:" + (left+100) + "; top:" + (top+200) + "";
}

сейчас выходит так:

var top = 100px;
document.getElementById("pic").style="position: absolute; top:" + (100px+200) + "";

Выходит что код картинки будет таков:

<img src="box.gif" id="pic" style="position: absolute; left:100; top:100px100"></img>

Как это решить?

И как эти два действия слить в один?

document.getElementById("pic").src="circle.gif";	
document.getElementById("pic").style="position: absolute; left:" + (left+100) + "; top:" + (top+200) + "";

Как-то так...но так не работает:

document.getElementById("pic").src="circle.gif".style="position: absolute; left:" + (left+100) + "; top:" + (top+200) + "";

Как вариант можно использовать этот код
var el = document.getElementById('pic');
el.src="circle.gif";
var top = el.style.top, left=el.style.left; //тут будут, например 100px
top = parseInt(top); // теперь будет 100 без 'px'
left = parseInt(left);
el.style.top = (top+100)+'px'; // css требудет указания размерности
el.style.left = (left+100)+'px';

Форум

Справочник

Discord чат

Курсы javascript