Help Me Avoid Dain Bramage

It May be Too Late...

[cmarshall]

I am banging my head against the wall on this. There has GOT to be a simple solution.

I have a page that allows administrators to specify styles in a pseudo-bbcode manner, like so:

[style=font-weight:bold;color:#0c0]Styled Text

The problem is that I use JavaScript to update the displayed text, so I parse out the style codes.

I plant the text itself using innerHTML for a <div>, but I need to use the <div> .style to set the styles.

The problem is with that .style property. The style attributes are not exactly the same as the XHTML displayed ones. For example, font-weight is fontWeight.

However, it isn't as simple as removing dashes and CamelCasing. There are sometimes capitalization and spelling differences, so there's no easy way to just parse the "bbcode" and format it for the object.

My question is this: Is there a JavaScript/DOM way to just plant a string into the <div> DOM instance, and let it figure out the styles? I can't see anything in the usual places I look this stuff up. I haven't tried replacing the entire <div> via the parent innerHTML because that would require a fairly substantial rewrite of my PHP. I'm not even sure if that would work. innerHTML can act funny, so, for all I know, I rewrite the PHP, only to find that style="" attributes embedded in innerHTML are not honored.

Any feedback is appreciated.

[cmarshall]

I figured out how I'll do it.

I'll just have admins use the JavaScript entity names, not the CSS names.

Bit awkward, but they're admins, so the regular mensch don't need to know this stuff.

[cmarshall]

Humpf. No, that didn't do it, because I need to use a standard XHTML style="" when the page reloads, and I have the same problem, only in reverse.

I wound up using a Regex, like so:

var matches=elem_ar[0].match(/([^-]+)-([a-z])(.*)/);
if(matches.length==4){
elem_ar[0]=matches[1]+matches[2].toUpperCase()+matches[3];
}

This will work for 90% of styles, and I can just nix the ones that don't translate as easily.

[daveVk]

div.style.cssText = ... Not sure if this is IE specific?

[cmarshall]

cssText is a common property. Thanks!

I think it's read-only.

I'll experiment with it. Even if it's read-only, I could use it.