Javascript to manipulate css files?

Question

Im using javascript to change the display of a object, there is a css class already for the same object : #id{display:none;} When i use javascript to alter display to display:block, the Display:block; appears on the object itself in the HTML. The css propertys seem to be overriding the html's propertys because it still doesnt display.
prev4.onclick = function(){ lrg.setAttribute("src", eventpic4); lefta.setAttribute("display", "block"); };

HTML inline styles will always take precedence over CSS styles. I recommend opening it up in Chrome's Web Developer and see what the computed styles are for the element. — Alan
– Alan, Commented Nov 6, 2012 at 7:47
@Alan unless the css style has !important. Also, there are some quirks between using actual css and html style attributes(like with and border attributes) — René
– René, Commented Nov 6, 2012 at 7:56

Julien Royer · Accepted Answer · 2012-11-06 08:08:08Z

3

A good practice is to avoid manipulating styles directly in JavaScript; you can rely on classes instead and let CSS handle the styling:

<style>
  #id { display: none; }
  #id.enabled { display: block; }
</style>
<script>
  document.getElementById("id").className = "enabled";
</script>

answered Nov 6, 2012 at 8:08

Julien Royer

1,4291 gold badge14 silver badges28 bronze badges

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

Comments

karaxuna · Accepted Answer · 2012-11-06 07:48:48Z

1

 document.getElementById('id').style.display = 'block'

answered Nov 6, 2012 at 7:48

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

Collectives™ on Stack Overflow

Javascript to manipulate css files?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related