Cannot apply style to dynamically created elements in javascript

Question

I have the following code:

let dynel = document.createElement('div');
dynel.className = 'foo';

dynel.style.width = '5px';
dynel.style.height = '5px';
dynel.style.backgroundColor = 'blue';

document.body.appendChild(dynel);

This code works as I expect it to, after appending the dynamic element to the document, a 5 x 5 blue box appears. The problem starts when I try to access the element via its className to style it further:

var foo = document.getElementsByClassName('foo');

foo[0].style.top = '50px';
foo[0].style.left = '200px';

This code should position the box but it does nothing, what am I doing wrong? Preferably I'm looking for a pure JS solution so no JQuery.

Thanks in advance :)

Answer 1

Problem

The default value of the property position of a div is static. When you try to set left/right [..] on static element it has no effect on that element.

static : every element has a static position by default, so the element will stick to the normal page flow. So if there is a left/right/top/bottom/z-index set then there will be no effect on that element. relative : an element's original position remains in the flow of the document, just like the static value.

Solution

• You have to set the position property in your created element to absolute, fixed or relative.

let dynel = document.createElement('div');
dynel.className = 'foo';

dynel.style.position = "absolute"
dynel.style.width = '5px';
dynel.style.height = '5px';
dynel.style.backgroundColor = 'blue';

document.body.appendChild(dynel);

var foo = document.getElementsByClassName('foo');

foo[0].style.top = '50px';
foo[0].style.left = '200px';

Answer 2

You need to ensure that foo[0] has the position: absolute; style set.

Answer 3

top, left, right, bottom works on those elements in which position property is not static. But either absolute or relative or fixed.

As per your requirement use any of the 3 values in your CSS and styles will start to apply. Something like this would work (But it depends how you want you implemention of the code)

var foo = document.getElementsByClassName('foo');

foo[0].style.position = "relative";
foo[0].style.top = '50px';
foo[0].style.left = '200px';

NOTE: position:fixed and position:absolute would get your element out of the normal code flow and you will have to adjust accordingly.

Answer 4

I was inspired by @Imran Rafiq Rather to give the details example for each situation:

1. relative

If you just want to adjust position a little bit relative to its default position, use key word "relative"

Default position is 'static' position

var foo = document.getElementsByClassName('foo');

foo[0].style.position = "relative";  // works almost the same as default or 'static', because 'relative' is relative to it's 'static' position. 

foo[0].style.top = '50px';
foo[0].style.left = '200px';

https://codepen.io/hoogw/pen/QWqRdBY

2. absolute

we usually want to relative to its parent div, should use 'absolute'

var foo = document.getElementsByClassName('foo');

foo[0].style.position = 'absolute';  // relative to its parent div

foo[0].style.top = '50px';
foo[0].style.left = '200px';

https://codepen.io/hoogw/pen/GRMaWKB?editors=1100

3. fixed

If you want to relative to whole page, use 'fixed'

var foo = document.getElementsByClassName('foo');

foo[0].style.position = 'fixed';  // relative to whole page, whole html body document

foo[0].style.top = '50px';
foo[0].style.left = '200px';

https://codepen.io/hoogw/pen/yLzWMvJ

Here is link to document https://developer.mozilla.org/en-US/docs/Web/CSS/position