How to manipulate the position of a div

Question

I need to manipulate the position of two <div> in opposite motions.

I have researched many places but found no explanation of how such an effect can be done nor means of how to do it.

I didn’t want to ask for the answer, but I don’t even know how to research it!

Answer 1

I won’t give you the answer of how to move two Divs in opposite directions, but here’s the basics of how to manipulate an HTML element.

Consider this div:

<div id="minhaDiv"></div>

In Javascript, you need:

// 1. Acesso ao objeto do DOM que representa a div
var div = document.getElementById('minhaDiv');

// 2. Manipular o objeto *style* da div para alterar sua aparência (incluindo posição)

// 2.1 Aparência
div.style.width = '50px';
div.style.height = '50px';
div.style.backgroundColor = '#ff0000';

// 2.2 Posição
div.style.position = 'absolute';
div.style.top = '100px';
div.style.left = '50px';

// 3. Pegadinha! Atenção ao alterar a posição baseada na atual:
var leftAtual = parseInt(div.style.left, 10);
div.style.left = (leftAtual + 5) + 'px'; // desloca 5px para a direita

To animate the position, you will need to handle one of these 3 functions:

• window.requestAnimationFrame
• window.setInterval
• window.setTimeout