Thursday, March 8, 2007

HOWTO: Change a cascaded style in IE / Firefox / Opera

So you want to alter an HTML element's style dynamically. Seems simple enough on the surface -- just alter the .style property appropriately, right?

<a href='javascript:showElement("div2")'>click me</a>
<div id='div2' style='display:none'>This will show up!</div>

<script type='text/javascript'>
function showElement(id)
var el = document.getElementById(id);
if (el){
el.style.display = 'block';
}
}

</script>

You go test it, it works fantastic. You develop the rest of your page and complete it. So to do things properly, you move most of the style attributes into a CSS file instead of doing inline style definitions. So now you have:

css file:
.toggleme {
display:none;
}


page file:

<div id='div2' class='toggleme'>This will show up!</div>

You go back and test your page, but it doesn't work any more! No error, but the div doesn't show up either. What gives?

It turns out that most browsers handle the .style attribute of an element as meaning the attribute value directly from the html itself, instead of the cascaded value. IE uses .currentStyle and .runtimeStyle to renote the read/write properties for cascaded styles, while Firefox/Opera/etc uses the DOM standard of document.defaultView.getComputedStyle(). But we want something we can call that will just set the silly style regardless of browser and regardless of where the style is actually declared.

I wrote an open source framework for doing a fair amount of client-side manipulation that is browser independent. I call this Interactive Website Framework -- you can check it out at IWF on sourceforge. But for our needs, we really only need a single function (which I modified slightly to eliminate calls to other functions in the framework):

function iwfStyle(id, styleName, newStyle){
var el = document.getElementById(id);
if (!el) { return false; }
var ret = '';
if (typeof(newStyle) != 'undefined'){
// assigning new style
if (el.runtimeStyle){
ret = el.runtimeStyle[styleName] = newStyle;
} else {
ret = el.style[styleName] = newStyle;
}
} else if (el.currentStyle) {
// reading IE style
ret = el.currentStyle[styleName];
} else {
// reading DOM style
try {
var cs = document.defaultView.getComputedStyle(el,null);
ret = cs.getPropertyValue(styleName);
} catch(e) {
}
}
return ret;
}


Now if we change our showElement function to simply call iwfStyle, we're set:

<script type='text/javascript'>
function showElement(id)
iwfStyle(id, 'display', 'block');
}

</script>

So now the call will work regardless of browser or where the style is defined. Check out the full framework on sourceforge. It includes a client-side Xml parser, an Ajax abstraction layer, and some rudimentary gui enhancements, like animating elements, docking elements, drag-n-drop, etc.

5 comments:

viagra online said...

Incredible useful tip, now my firefox interphase looks better ! do you you have more advices?

Anonymous said...

xanax depression xanax side effects while pregnant - xanax and 2 mg day

Anonymous said...

Post20, http://www.arlo.net/massacree/ viagra online, kjti6, http://www.arlo.net/fccgb/ buy viagra no prescription, twkj1, http://www.arlo.net/fccgb/notes/ generic viagra, inpf4, http://www.arlo.net/bytes/ order cheap viagra, dhld4, http://www.arlo.net/live/ viagra for sale

Anonymous said...

The number of affiliates [url=http://www.newyorkgiantsofficialshop.com/]Victor Cruz Child Jersey[/url]
irrelevant if they don't promote the products each thirty day period Clearance racks are somewhat filled up with both names and numbers of the players that are not anymore active for the team
We expect to wholesale NFL Jerseys[url=http://www.washingtonredskinsprostore.com/ryan+kerrigan+jersey+freeshipping-c-9_28.html]Ryan Kerrigan Jersey[/url]
to make sure that your airline [url=http://www.greenbaypackersofficialstore.com/]Official Clay Matthews Jersey[/url]
ideal in just about every way you see match and we will usually go the exceeded mile to supply a Jordan Steal Jersey flawless knowledge But the truth [url=http://www.greenbaypackersofficialstore.com/]Clay Matthews Limited Jersey[/url]
significantly various

Anonymous said...

Wow that was unusual. I just wrote an very long comment but after
I clicked submit my comment didn't show up. Grrrr... well I'm not
writing all that over again. Anyways, just wanted to say wonderful blog!



Feel free to visit my weblog :: Zahngold Verkaufen