How to increment top attribute of div in JS?

Question

i need to increment the value top attribute of a div. for some reason it doesn't work.

i tried to use obj.style.top and increase the value but it doesn't work.

let sqr = document.getElementById("sqr")
let val = parseInt(sqr.style.top)
sqr.style.top = (val + 100) + "px";

body {
  width: 100vw;
  height: 100vh;
  position: relative;
}

#sqr {
  height: 30px;
  width: 30px;
  background-color: blue;
  position: absolute;
  top: 100px;
  left: 100px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
  <link rel="stylesheet" href="index2.css" />
</head>

<body>
  <div id="sqr"></div>
  <script src="index2.js"></script>
</body>

</html>

I just want the square move up about 100 px. thanks.

`sqr.style.top` will only look at an inline style set on the HTML tag, not a value that is set in CSS — skyline3000, Aug 25 '19 at 18:08
what is the difference between this and define it in CSS file? — Shemesh, Aug 25 '19 at 18:12
The difference is what I said, the JavaScript line `this.style` does not look at what is defined in the CSS file, only what is set on the element inline. — skyline3000, Aug 25 '19 at 18:13
how can i change it in the css file and not define it as inline? — Shemesh, Aug 25 '19 at 18:15

score 0 · Accepted Answer · answered Aug 25 '19 at 18:15

0

Use

sqr.style.top= (sqr.offsetTop + 100) + "px";

style.top returns the top value set in style attribute on the html tag.

answered Aug 25 '19 at 18:15

DevLasting

352
1
9

how can i do it with percents? – Shemesh Aug 25 '19 at 18:23
As in you want to add some percent of top instead of 100px ? – DevLasting Aug 25 '19 at 18:29

score 0 · Answer 2 · answered Aug 25 '19 at 18:16

The .style DOM property returns a CSS Style Declaration object containing the styles that have been set on the object through the HTML style attribute. Since your div doesn't have any inline styles applied to it, that technique won't return anything.

Instead, use getComputedStyle(), which returns the computed value of any/all styles, regardless of how/where they were set (inline, JavaScript, stylesheet).

Also (FYI):

As a best practice, you should always specify the optional second argument for parseInt() (the radix) to ensure you don't accidentally get a value you didn't expect.

let sqr = document.getElementById("sqr")
let val = parseInt(getComputedStyle(sqr).top, 10);
sqr.style.top= (val + 100) + "px";

body{
    width:100vw;
    height:100vh;
    position: relative;
}
#sqr{
    height: 30px;
    width:30px;
    background-color: blue;
    position:absolute;
    top:100px;
    left:100px;
}

<div id = "sqr"></div>

How to increment top attribute of div in JS?

2 Answers2