Editing an item's style via JavaScript?

Question

I'm looking for help regarding how to edit an object's style in a separate CSS file via JS. For example, if I have an object that I style with #objectid {left: 0%;} in my CSS file, how would I go about changing that left property via JavaScript? I'm aware you can do object.style.property but that hasn't been working for me as of late. What's the most efficient/easy method of doing this? Thanks in advance.

Using JS on the browser to change a style won't modify the CSS directives contained in the CSS file on the server. The JS will only modify the style shown in the running browser. You know that, right? — Paul, Jun 24 '14 at 21:17

score 1 · Answer 1 · answered Jun 24 '14 at 20:39

1

You have to get the element in the DOM

with pure javascript:

document.getElementById('objectid').style.left = '20%'

With jQuery

$('#objectid').css('left', '20%');
or
$('#objectid').css({'left': '20%'});

answered Jun 24 '14 at 20:39

Lordn__n

328
2
11

score 0 · Accepted Answer · answered Jun 24 '14 at 20:38

0

The standard way:

document.getElementById('objectid').style.left = "10%";

But if you're worried about efficiency, try not to modify any styles directly using JS... try adding/removing classes instead.

answered Jun 24 '14 at 20:38

Shomz

37,421
4
57
85

score 0 · Answer 3 · answered Jun 24 '14 at 22:21

This is correct:

document.getElementById('thing').style.left="5px"

But I believe you need to set the position before it can work, e.g.:

document.getElementById('thing').style.position="absolute";
document.getElementById('thing').style.left="5px"

Editing an item's style via JavaScript?

3 Answers3