setting CSS style (ie element.style.x - eg style.width or style.maxWidth) with Javascript

I’m posting this information because it solves a problem that wasted several hours of my life. It’s somewhat obscure, and I didn’t find much help from google searches. If you are trying to set the width of a css element in javascript, you must add “px” (or eg “em”) after the value for it to work in IE and Firefox. For example, you’d type: document.getElementById("content").style.maxWidth=contentwidth+"px;"; There is a problem however. At least in Opera8.5 (and perhaps other web browsers) - you’ll break the page if you add the “px”. Opera assumes px and you should not add it. For opera, you’d type: document.getElementById("content").style.maxWidth=contentwidth; So you’ll need to use a browser sniffer as a workaround. I use this simple code (may not work for all cases):

var agt=navigator.userAgent.toLowerCase();
var is_opera = (agt.indexOf("opera") != -1);
if (!is_opera)//most browsers need "px"
{
document.getElementById("content").style.maxWidth=contentwidth+"px;";
}
else //adding "px" breaks opera8.5
{
document.getElementById("content").style.maxWidth=contentwidth;
}

note: For more on browser sniffers, check here http://webreference.com/tools/browser/javascript.html

Comments