Programatically positioning things inside a parent element by percentage

Question

I was wondering what the correct way of programatically setting an elements position inside a parent element (as a percentage) from javascript would be.

In CSS you can do something like:

left: 25%;

There are two things I would like to avoid: jQuery, and calculating an absolute position based on the current size of the parent element.

score 3 · Accepted Answer · answered May 24 '14 at 11:35

Your question is a little vague, but to change a css property programmatically you can access it using the element's style property. An example:

<div id="thisdiv"><span id="thisspan">Hello</span></div>

<script>
document.getElementById('thisspan').style.marginLeft = "25%";
</script>

The css property margin-left becomes marginLeft in JavaScript. The percentage is measured with respect to the element's parent container-element, so doesn't need to be calculated.

Alternatively, define css-styles and change the element's className.

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

You could add padding to the parent element:

parent = document.getelementById("id").parentNode;
parent.style.paddingLeft = "25%";

If you want to do it on the element itself is more difficult. See this stackoverflow question for more details.

edited May 23 '17 at 11:50

Community

1
1

answered May 24 '14 at 11:42

Nikolaos Kakouros

522
6
11

That link is about reading a css property-value, which is more complicated. Setting a value is straight-forward. – Andy G May 24 '14 at 11:47
Adding padding to the parent element is a less favourable solution if there are multiple children – kvanbere May 24 '14 at 12:13
@Andy G Yes, that is what I am saying: "is more difficult" – Nikolaos Kakouros May 24 '14 at 15:18
@kvanberendonck The original question is quite vague. Eg, adding padding is better if there are floating elements where margin would not work. – Nikolaos Kakouros May 24 '14 at 15:20

Programatically positioning things inside a parent element by percentage

2 Answers2