Setting CSS position using Javascript

Question

How to set relative 50% 50% position using JS?

I tried:

document.getElementById("id").style.position = "relative 50% 50%";

but it don't seems to work...

Answer 1

You have to set them individually.

I made a variable to point to the style object, because we are modifying more than one property and because with() { ... } is considered harmful.

Also, I set the 50% to both properties because of right to left assignment, and because assignment of this string to the two properties isn't a problem (make sure you understand how this works, e.g. var a = b = [] will set a and b to the same Array object, often not desired).

var elementStyle = document.getElementById("id").style;

elementStyle.position = "relative";

elementStyle.top = elementStyle.left = "50%";

jsFiddle.

Answer 2

I do the following to center an element in its parent - which could be the body or another division.

document.getElementById("elementId").style.marginLeft = "auto"; document.getElementById("elementId").style.marginRight= "auto";

The position property determines how the element is placed in relation to the other elements on the page.

I just did a search to see if the position property can take values like the 50% you show in your question - it can't.

I checked to make sure something new had been added to CSS that allowed setting position to something other than those I show below. I thought that maybe I was wrong about the values that position can take (and do anything -- you can always code any values for various properties, than they are intended to have, but they won't do anything). I see nothing that says position can have values like 50% and actually do something.

The possible values of the position property are:

relative

fixed

absolute

static

inherit

or you can leave it off the element. From what I've seen position: static behaves the same as if you had not coded the position property for the element or class.

Go read about position here

The position property can be confusing until you see the effects of the different values on the position of the element - and even then it is not always clear.

By the way - you can also change style.left and style.top but they will have no effect unless position is set to one of the possible values.

I know that sounds strange but it is how things currently work (and I doubt it will ever be changed) and we have to live with.

So, if you set the top and/or left and nothing happens, look at the position properties value,

You can "play" with property values with the "Inspect Element" facility of your browser. I think all of the major browsers have such a facility. Go read this page about "inspecting"

It allows you to change CSS properties, delete, and add new ones, to the elements as you look at the page in your browser. You can do such things as changing the margin-left to auto and the margin-right to auto and see how the element is positioned. You can change, add, or delete any CSS properties you want.

You can also change the position to one of it several values (static, relative, absolute, or fixed) to see how the element is display in relationship to the other elements on the page.

If you want to remove a property you can highlight its value and press delete and enter - that will remove the property from the element or class, if you are looking at class CSS.

This facility allows you to play "what if" with any element's properties without actually changing the HTML or CSS and reloading the page.

I strongly suggest that you have a pencil and pad of paper and make notes every time you change anything, If you don't you may wind up getting things the way you want them and not be able to remember everything that you changed.

Notes are very important!

To recap - to center an element within its parent, code the what follows - replaced elementid with the id of your element.

document.getElementById("elementId").style.marginLeft = "auto"; document.getElementById("elementId").style.marginRight= "auto";

As for the position value, try them all out with the element inspector in your browser. That is a quick way to begin to understand the effects of the possible values of the position property.