Изменение текущего положения элемента

@ggSol · Регистрация: 11.10.2017

Author24 — интернет-сервис помощи студентам

Здравствуйте! Осваиваю js и хотел бы спросить: есть элемент и 2 кнопки (инпуты) :

HTML5

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css.css">
        <script src="jscript.js"></script>
        <title>quick test</title>
    </head>
    <body>
        <div class="quad"></div>
        <div class="button_wrap">
            <input class="right" type="button" value="--->">
            <input class="left" type="button" value="<---">
        </div>
    </body>
</html>

и css к ним:

CSS

.quad{
    margin:0;
    padding:50px;
    background-color:green;
    width:100px;
    position:relative;
        left:0;
}
 
.button_wrap{
    margin-top:20px;
}
 
.button_wrap input{
    margin-right:30px;
}

при нажатии на кнопку меняется положение элемента:

Java

window.onload = function(){
    var left = document.querySelector('.right');
    var quad = document.querySelector('.quad');
    
    left.onclick = function(){
        quad.style.left += '5px';
    }
}

Как сделать так, чтобы к текущему положению (left) прибавлялось 5px, т.е. чтобы объект как бы двигался.

@sash23 · 16.04.2018, 15:01

Аналогичная тема Движение блока при каждом клике

@kalabuni · 16.04.2018, 15:18

пруфы в помощь:
1. getComputedStyle()
2. getPropertyValue()
3. parseInt()

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

var left = document.querySelector('.right');

Оруэлла недавно перечитывали?
"война - это мир", "вправо - это влево"

@sash23 530 / 385 / 247 Регистрация: 31.05.2016 Сообщений: 1,049
	16.04.2018, 15:01	2
	Аналогичная тема Движение блока при каждом клике 1

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	16.04.2018, 15:18	3
	пруфы в помощь: 1. getComputedStyle() 2. getPropertyValue() 3. parseInt() Сообщение от ggSol var left = document.querySelector('.right'); Оруэлла недавно перечитывали? "война - это мир", "вправо - это влево" 1