Retrieving CSS properties in JavaScript and then modifying it

Question

How can the CSS property of an element (e.g margin-left) be retrieved and then some value can be added to it, and the element gets altered with the updated value.

Suppose:

var element = document.getElementById("myElement");
var value = element.style.margin-left;

//How to do something like this?
var updatedValue = value + 10;
element.style.margin-left = updatedValue;

As, style.margin-left accepts values in pixels. How to retrieve the current value, then add something to it, then update the element with the same? Thank you.

Do you have option to use jQuery?

ndd
– ndd

2015-11-12 17:48:01 +00:00
Commented Nov 12, 2015 at 17:48 — ndd
– ndd, Commented Nov 12, 2015 at 17:48
No. jQuery is out of this scenario.

bbbneo333
– bbbneo333

2015-11-12 17:50:18 +00:00
Commented Nov 12, 2015 at 17:50 — bbbneo333
– bbbneo333, Commented Nov 12, 2015 at 17:50

jeffjenx · Accepted Answer · 2015-11-12 18:05:48Z

7

Just use parseInt or parseFloat to convert the string to a number, then re-apply the px.

var value = parseInt(element.style.marginLeft);
element.style.marginLeft = (value + 10) + 'px';

Note: this will work for other units, such as em, %, etc.

Per @ScottKaye in the comments, here is an example using getComputedStyle, if the styles are applied via a stylesheet instead of in the style attribute on the DOM element:

var value = parseInt( window.getComputedStyle(element).marginLeft );
element.style.marginLeft = (value + 10) + 'px';

edited Nov 12, 2015 at 18:05

answered Nov 12, 2015 at 17:51

jeffjenx

17.6k6 gold badges63 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bbbneo333 Over a year ago

I'm getting a null value, when I'm trying to parse the margin.style.marginLeft

jeffjenx Over a year ago

Is margin.style.marginLeft correct (i.e. is the variable named margin)?

Scott Over a year ago

@AnkitNeo Unless margin-left is set explicitly in the inline style, you can't get stylesheet values like this. Take a look at getComputedStyle if this is what you need.

jeffjenx Over a year ago

Good point @ScottKaye, I added an example using getComputedStyle.

Collectives™ on Stack Overflow

Retrieving CSS properties in JavaScript and then modifying it

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related