Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Перемещение div блока (https://javascript.ru/forum/dom-window/28400-peremeshhenie-div-bloka.html)

Deself 18.05.2012 01:39
Перемещение div блока
 
Народ, помогите нужно чтобы при нажатии на кнопку перемещялся div блок. Как это осуществить?
Вот код

<html>
<head>
<style>
.page2{
width:637;
height:660;}
.users{
width:238;
height:441;
padding-top:126px;}
.online{
width:236;
height:159;
background-image: url(images/online.png);
left:10px;}
.offline{
width:236;
height:232;
background-image: url(images/offline.png);}
</style>
</head>
<body>
<div class="page2">
<div class="users">
<div class="online" onclick="this.style.left=parseInt(this.style.left) +20+'px'"></div>
<div class="offline"></div>
</div>
<input type="submit">
<div class="square" onclick="this.style.left=parseInt(this.style.left) +20+'px'" style="left: 10px">111</div>
</div>
</body>
</html>

bes 18.05.2012 11:26
На мой взгляд, тут всё дело в том, что параметры, заданные в тегах <style></style> не задают свойство style, поэтому необходимо либо задать эти параметры в атрибуте style тега, либо явно установить их в коде.

<button id="myButton">&#8594</button>
<div id="myDiv"></div>

<script>
window.onload = function () {
  with (myDiv.style) {
    position = 'absolute';
    left = '60 px';
    top = '10 px';
    width = '40 px';
    height = '40 px';
    background = 'green';
  }
}

myButton.onclick = function () {
  myDiv.style.left = parseInt(myDiv.style.left) + 20 + 'px';
}
</script>

vadim5june 18.05.2012 11:55
Цитата:
Сообщение от Deself (Сообщение 175115)
Народ, помогите нужно чтобы при нажатии на кнопку перемещялся div блок. Как это осуществить?
блоки у Вас статически позиционированны поэтому надо задавать не left а margin-left
....onclick=this.style['margin-left']='20px'

bes 18.05.2012 14:06
Цитата:
Сообщение от vadim5june
блоки у Вас статически позиционированны поэтому надо задавать не left а margin-left
....onclick=this.style['margin-left']='20px'
Тот способ передвижения, который использует автор, сработает только при явно заданном свойстве style.left (для position: absolute || fixed) или style.marginLeft (для position: static || relative || absolute || fixed).

Но ваш способ также работоспособен, например, если ввести дополнительную переменную (другого пока на ум не приходит), например, var step = 0; и добавить в обработчик её увеличение:
onclick = "step = step + 20; this.style['margin-left'] = step + 'px'"

vadim5june 18.05.2012 14:12
Цитата:
Сообщение от bes (Сообщение 175193)
Но ваш способ также работоспособен, например, если ввести дополнительную переменную (другого пока на ум не приходит), например, var step = 0; и добавить в обработчик её увеличение:
onclick = "step = step + 20; this.style['margin-left'] = step + 'px'"
Если циклически то так
а в варианте автора я вместо parseInt(this.style.left)
пишу this.offsetLeft -при нестатическом позиционировании

bes 18.05.2012 14:26
Цитата:
Сообщение от vadim5june
а в варианте автора я вместо parseInt(this.style.left)
пишу this.offsetLeft -при нестатическом позиционировании
тоже вариант


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