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');

Comments are closed.

%d bloggers like this: