IssueTrackerProduct IssueTrackerProduct

About my baby Open Source project

Crosstips.org Crosstips.org

My fun Crossword solver project. Crosstips.org & Krysstips.se

Kung Fu Kung Fu

Fujian White Crane Kung Fu

Fry-IT

Fry-IT is the company I work for

Photos Photos

Photoalbum, both old and new.

Zope Zope

What I have and am doing with Zope

Receptsamlingen Receptsamlingen

In Swedish only. About my "Collection of Recipes" website.

Contact me Contact me

My contact details and how to contact me.

  Mobile version of this page Mobile version of this page

del.icio.us Save this page in del.icio.us

Previous:
Thuas Trägubbar
 Next:
Flash 9 on Ubuntu Edgy Eft

Related blogs

DOM Scripting
IssueTrackerProduct feature list
createElement('a') with a javascript href

Related by category

JavaScript

 

setAttribute('style', ...) workaround for IE

createelement, setattribute, style, fontWeight, font-weight

8th of January 2007

I knew had I heard it before but I must have completely missed it anyway and forgotten to test my new Javascript widget in IE. None of the stylesheet worked in IE and it didn't make any sense. Here's how I did it first: 

 var closer = document.createElement('a');
 a.setAttribute('style', 'float:left; font-weight:bold');
 a.onclick = function() { ...

That worked in Firefox of course but not in IE. The reason is that apparently IE doesn't support this. This brilliant page says that IE is "incomplete" on setAttribute(). Microsoft sucked again! Let's now focus on the workaround I put in place.

First I created a function to would take "font-weight:bold;..." as input and convert that to "element.style.fontWeight='bold'" etc: 

 function rzCC(s){
   // thanks http://www.ruzee.com/blog/2006/07/\
   // retrieving-css-styles-via-javascript/
   for(var exp=/-([a-z])/; 
       exp.test(s); 
       s=s.replace(exp,RegExp.$1.toUpperCase()));
   return s;
 }

 function _setStyle(element, declaration) {
   if (declaration.charAt(declaration.length-1)==';')
     declaration = declaration.slice(0, -1);
   var k, v;
   var splitted = declaration.split(';');
   for (var i=0, len=splitted.length; i<len; i++) {
      k = rzCC(splitted[i].split(':')[0]);
      v = splitted[i].split(':')[1];
      eval("element.style."+k+"='"+v+"'");

   }
 }

I hate having to use eval() but I couldn't think of another way of doing it. Anybody?

Anyhow, now using it is done like this: 

 var closer = document.createElement('a');
 //a.setAttribute('style', 'float:left; font-weight:bold');
 _setStyle(a, 'float:left; font-weight:bold');
 a.onclick = function() { ...

and it works in IE!


Comment

21 comments so far
ivo van der Wijk - 8th January 2007  [«« Reply to this]
node.style.cssText = "..." usually does the trick for me
Peter Bengtsson - 8th January 2007   [«« Reply to this]
Really? I'll give that a try.
tjallen - 21st November 2007   [«« Reply to this]
Hooray! Thank-you.

In my case, involving styles of a div element, this worked only after I append the div to the body node, but yes!
state-machine - 29th January 2008   [«« Reply to this]
Yes, this is a really short solution! Thank you all for not giving up on this topic. By the way - it's not possible to code a lot of JavaScript for HTML using the DOM only, is it?
Brittany - 9th February 2007  [«« Reply to this]
thanks, it works well!
Ra - 21st May 2007  [«« Reply to this]
BEFORE

var closer = document.createElement('a');
//a.setAttribute('style', 'float:left; font-weight:bold');

_setStyle(a, 'float:left; font-weight:bold');
a.onclick = function() { ... }

----------------------
AFTER

var closer = document.createElement('a');
//closer.setAttribute('style', 'float:left; font-weight:bold');

_setStyle(closer, 'float:left; font-weight:bold');
closer.onclick = function() { ... }

If type 'closer' it's work

Thanks Peter :D
Matt - 8th January 2008  [«« Reply to this]
Just what I was looking for.

Thanks a lot!
agent47 - 3rd May 2008  [«« Reply to this]
Wow that was great buddy ! You saved me a lot of weeks. I need to personally thanks you too.
LP - 14th June 2008  [«« Reply to this]
Hi, it helped me to fix appending of new style values, without overwritting all previously declared ones (just those that are meant to change). Thanks.
If you still don't like eval(), try this:
element.style[k]= v;
You know objects, arrays, objects...
adrian lee - 11th July 2008  [«« Reply to this]
Thanks a lot! perfect code!!!
Luis Serrano - 29th July 2008  [«« Reply to this]
This is great! I've improved it just a bit:

_setStyle: function (aElement /* object */, aDeclaration /* CSS Declaration */) {
try {
if (aElement) {
aDeclaration = aDeclaration.replace(/\s+/g,''); // remove all white spaces
if (document.all) { // IE Hack
if (aDeclaration.charAt(aDeclaration.length-1)==';')
aDeclaration = aDeclaration.slice(0, -1);
var k, v;
var splitted = aDeclaration.split(';');
for (var i=0, len=splitted.length; i<len; i++) {
k = rzCC(splitted[i].split(':')[0]);
v = splitted[i].split(':')[1];
eval("aElement.style."+k+"='"+v+"'");
}
return (true);
} else { // The clean way
aElement.setAttribute ('style', aDeclaration);
return (true);
}
}
} catch (e) {
return (false);
}
}

Hope you like it. Good job mate ;)
Luis Serrano - 29th July 2008  [«« Reply to this]
I forgot to tell why I decided to "improve" it: if you put a white space in the css declaratio, such:

background-color: #FFFFFF;

the original code will miss it. You had to put it together for it to work, like:

background-color:#FFFFFF;

Oh, and the function declaration in my version is for prototype. If you don't use this technique just change the declaration to:

function _setStyle (aElement /* object */, aDeclaration /* CSS Declaration */)

That's it.

Cheers!
Jason - 3rd September 2008  [«« Reply to this]
I found myself having issues with this same problem today and have found out a few interesting things.

In IE (they just have to be different don't they) the style attribute is actually treated as an Element. You can set the different style properties by using the syntax shown below.

oNewDiv = createElement('div');
oNewDiv.style.setAttribute('border', '1px solid #000');
oNewDiv.style.setAttribute('backgroundColor', '#fff');

Of course, this fails terribly in firefox :(

However, I have always been able to set styles without the setAttribute function in a cross browser supported way like:

oNewDiv.style.backgroundColor = '#fff';
Pascal - 5th September 2008  [«« Reply to this]
This won't work at all for me, using IE 7 or 8..
Raj Shah - 20th October 2008  [«« Reply to this]
eval() is devil. this workaround is not going to help. infact it will hang your IE and fill your memory with bunch of variables.

If you code little smart using conditions if(document.all) { code here }else{ code here } then everything will be cool.

I've tried and it's working in all browsers.
nothing~AT~nothing_dot com - 6th January 2009  [«« Reply to this]
Try using cssText for ie.
Element.style.setAttribute('cssText', 'left:150px;.........
you could create function if you wanted.
Emanuele Caldarola - 17th February 2009  [«« Reply to this]
thanks very very very much!
Emanuele Caldarola - 17th February 2009   [«« Reply to this]
I have added this code:

if(k=='class')
{
eval("element.className='"+v+"'");
}
Vimal - 2nd March 2009  [«« Reply to this]
@ivo van der Wijk=You're a genius man!!!
I know it sounds very exagerrated but what the hell... u just saved me a couple of hours of searching
Quiquelie - 15th June 2009  [«« Reply to this]
Hi,

Try this:

var closer = document.createElement('a');
a.style.float="left";
a.style.fontWeight="bold";
a.onclick = function() { ...


It works on all browsers !! Enjoy it !!
 
Name:
Email:
hide my email address.

Your email address will be encoded to prevent email-extraction spiders from reading it so you won't get spammed if you decide to show your email address.