Форум

Deself · #1 (**permalink**) 18.05.2012, 01:39

Народ, помогите нужно чтобы при нажатии на кнопку перемещялся 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 · #2 (**permalink**) 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 · #3 (**permalink**) 18.05.2012, 11:55

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

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

блоки у Вас статически позиционированны поэтому надо задавать не left а margin-left
....onclick=this.style['margin-left']='20px'

bes · #4 (**permalink**) 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 · #5 (**permalink**) 18.05.2012, 14:12

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

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

Если циклически то так
а в варианте автора я вместо parseInt(this.style.left)
пишу this.offsetLeft -при нестатическом позиционировании

bes · #6 (**permalink**) 18.05.2012, 14:26

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

а в варианте автора я вместо parseInt(this.style.left)
пишу this.offsetLeft -при нестатическом позиционировании

тоже вариант

Форум

Справочник

Discord чат

Курсы javascript