Eu estou precisando que cada vez que eu aperte em um botão, uma propiedade CSS aumenta em 10, exemplo:
<style>div { left: 0; }</style>
<button>Aumentar left em 10</button>
<div></div>
E toda vez que eu clicar, ele aumenta o left da Div em 10.
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeEu estou precisando que cada vez que eu aperte em um botão, uma propiedade CSS aumenta em 10, exemplo:
<style>div { left: 0; }</style>
<button>Aumentar left em 10</button>
<div></div>
E toda vez que eu clicar, ele aumenta o left da Div em 10.
Você pode criar uma variável para manter a informação de quantos pixels o elemento deve estar afastado (pela propriedade left
) e, a cada clique no botão, alterar essa propriedade e computar o novo left
utilizando a propriedade style
.
Algo assim:
const btn = document.querySelector('button');
const div = document.querySelector('#target');
let currentLeft = 0;
btn.addEventListener('click', () => {
currentLeft += 10;
// Após adicionar 10 à nossa variável, adicionamos no estilo do elemento:
div.style.left = `${currentLeft}px`;
});
#target {
left: 0;
position: relative;
width: 50px;
height: 50px;
background-color: orangered;
}
<div id="target"></div>
<button>Clique!</button>
Você pode usar o offsetLeft
para pegar o valor de left
se ainda não foi definido.
offsetLeft
retorna o valor computado de left
, por exemplo:
O elemento x esta na posição left
200px
. offsetLeft
retornara 200
.
O problema é que offsetLeft
apenas retorna valores, ele não pode ser definido. Para fazer um elemento se mover teremos que mexer no seu estilo, exemplo: elemento.style.left
(Lembrando que para mover um elemento usando left
, top
, right
ou bottom
é necessário que este elemento tenha a propriedade CSS position
, tem vários valores possíveis, mas vou demonstrar com o valor relative
. Link para saber mais sobre os diferentes valores de position
: A propriedade position)
function mover(elemento) {
elemento.style.left = elemento.offsetLeft + 10 + "px";
}
/*
Ou no estilo de função em uma variavel:
mover = function(elemento) {
elemento.style.left = elemento.offsetLeft + 10 + "px";
}
Ou uma função de seta:
var mover = (elemento) => {
elemento.style.left = elemento.offsetLeft + 10 + "px";
}
*/
body {
/* PARA ENFEITAR > plano de fundo ciano */
background: cyan;
}
button {
position: relative;
/* PARA ENFEITAR > transição de 1 segundos */
transition: 1s;
}
<!-- O "this" de "mover(this)" se refere ao elemento do proprio botão -->
<button onclick="mover(this)">Clica aqui para me mover!</button>