How to translateX and translateY for an element other than a canvas

user_15012953 0
Viewed 97

I want to translate a div element using javascript. I tried multiple ways, listed below (item is the element):

item = document.getElementById("myDiv");
var x, y
x = y = 20
// doesn't change anything
item.style.translate = "translate(" + x + "px," + y + "px)";
// only works on canvas
try {
  item.translate(x, y);
} catch (e) {
  console.log(e)
}
<div id=myDiv>Text...</div>

How can I move the div without resorting to CSS (I want to do this to multiple elements, differently)?

html javascript
1 Answers
  • add var keyword to item
  • separate x and y assigning values
  • replace translate with transform
  • delete the colon : after translate:()

NOTE: add semicolons ; to the code

var item = document.getElementById("myDiv");
var x, y;
x = 60; y = 60;

item.style.transform = `translate(${x}px, ${y}px)`;
<div id=myDiv>Text...</div>

To use the same functionality, create a function and pass:

// item, 50, 60 === el, x, y
addSpace(item, 50, 60);

The Code

var item = document.getElementById("myDiv");

const addSpace = (el, x, y) => {
    return el.style.transform = `translate(${x}px, ${y}px)`;
};

addSpace(item, 60, 60);
<div id="myDiv">Text</div>

user_145594360
Related