changing an element's CSS dynamically
Let’s say you want to change the display
of an object to block
, and it’s border
to 1px solid red
. You could do it with:
var el=document.getElementById('your_el'); el.style.display='block'; el.border='1px solid red';
The above will work fine, but in some cases, Internet Explorer will completely ignore what you’re trying to do.
To get around this, we can use setAttribute()
, which would look something like this:
document.getElementById('your_el').setAttribute('style','display:block;border:1px solid red');
…which is more efficient anyway, and would be perfect – except that IE is non-standard and ignores that as well…
A version of the above that IE actually works is this:
document.getElementById('your_el').style.setAttribute('cssText','display:block;border:1px solid red');
Now, we can write a simple function to take care of this difference and handle the styling as needed:
function style_element(el,css){ if(window.attachEvent)el.style.setAttribute('cssText',css); else el.setAttribute('style',css); } style_element(document.getElementById('your_el'),'display:block;border:1px solid red');