Показать сообщение отдельно
  #8 (permalink)  
Старый 09.11.2018, 17:24
Новичок на форуме
Отправить личное сообщение для serega_dgl Посмотреть профиль Найти все сообщения от serega_dgl
 
Регистрация: 04.11.2018
Сообщений: 4

Сообщение от 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';
Ответить с цитированием