Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   изменение style.left и top через document.getElementById (https://javascript.ru/forum/css-html/6872-izmenenie-style-left-i-top-cherez-document-getelementbyid.html)

Jekel 29.12.2009 05:20
изменение style.left и top через document.getElementById
 
Есть 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 29.12.2009 09:32
Цитата:
Сообщение от Jekel
Как это решить?
parseInt

Цитата:
Сообщение от Jekel
И как эти два действия слить в один?
Зачем?

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

Kolyaj 29.12.2009 15:51
Цитата:
Сообщение от Jekel
А ParseInt пример можно на базе моего кода?
Привести значение стиля к числу, прибавить 100 и дописать 'px'.

Цитата:
Сообщение от Jekel
для сокращения количества кода? можно так сделать?
Закешировать значение getElementById.

Jekel 29.12.2009 16:03
;) пожалуйста, поменяй код..я так не доганяю ничего)

PeaceCoder 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 29.12.2009 19:49
:) Спасибище, теперь понял

serega_dgl 09.11.2018 17:24
Цитата:
Сообщение от Jekel (Сообщение 39474)
Есть 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';


Часовой пояс GMT +3, время: 23:04.