Help me convert "-webkit-border-radius" to "border-radius"

Help me convert "-webkit-border-radius" to "border-radius"

I noticed that there are plenty of sites around the web that use "-webkit-border-radius" and "-moz-border-radius" but no "border-radius" and I was wondering if it will be possible to make a script that converts one of them to "border-radius".
The problem is that, despite being a programmer, I've never done any JS and I have come to the conclusion that I totally suck at it...
So far I have this:

document.addEventListener(
    'DOMContentLoaded',
    function()
    {
        r = /-webkit-(border.*-radius)/g;
        sheets = document.styleSheets;
        for (i = 0; i < sheets.length; i++)
        {
            styles = sheets[i].cssRules;
            for (j = 0; j < styles.length; j++)
            {
                if (styles[j].cssText.match(r))
                {
                    styles[j].cssText.replace(r, "$1");
                    alert(styles[j].cssText);
                }
            }
        }
    },
    false    
);

It doesn't work and I have no idea where the problem is. It works if I try to change say "height" to "height2", but "-webkit-border-radius" is nowhere to be found. I have the feeling that Opera ignores the tags it considers invalid and does not put them in the cssRules. Of course I could be completely wrong...
Could someone help me with this?

Add transitions and all the other stuff too...

I can't help you with that because my JS knowledge is not good enough, but as an idea:
Just replacing -webkit or -moz with -o could be easier and it would catch all of the new fancy stuff. It could lead to some mangling of sites because "the other browsers"(TM) sometimes violate the not-yet-final specifications, but it should work in most of the cases.

Originally posted by Alpha-Toxic:

It doesn't work and I have no idea where the problem is. It works if I try to change say "height" to "height2", but "-webkit-border-radius" is nowhere to be found. I have the feeling that Opera ignores the tags it considers invalid and does not put them in the cssRules. Of course I could be completely wrong...

I'm fairly sure that if a property ends up in the error console, it won't be in the DOM style stuff either. But then, I would just try a simple testcase first. Stick -webkit-border-radius or some such on a page, and have the value be read or something along those lines.

Admittedly, I'm not exactly fantastic at JS either... but shouldn't it be this:
styles[j].cssText = styles[j].cssText.replace(r, "$1");
(wouldn't work, but it would be something along those lines)

or at least use it all in one (if you are just testing):
alert(styles[j].cssText.replace(r, "$1"));

*.replace() returns a value, it doesn't set the value (as far as I know)

@Vectronic
Thanks, I don't know how this slipped through, I'm pretty sure it was "styles[j].cssText = styles[j].cssText.replace(r, "$1");" when I was testing earlier. I must have changed it accidentally.

@Frenzie
I just tested, and you are right, invalid properties don't reach the cssRules. I thought cssText would be almost a raw dump of whatever is in the CSS, but obviously it isn't. If I put "border-radius" in the page source, in the cssText I automatically get "border-left-radius" and the rest, so this is anything but raw.

@QuHno
I think that -moz-border-radius uses a slightly different syntax (-moz-border-radius-topleft / -webkit-border-top-left-radius), so I chose the webkit version (thy are always both anyway).

Anyway, since I can't get to the -webkit properties the normal way, and that's about where my JS knowledge ends, I'm going to throw in the towel and give up... Thanks for the help

Opera still keeps track of them though...

it would be really messy, but you could get the source to the webpage (or just the CSS if it's external), and then parse it via JS to get the CSS rules, get which classes contain the WebKit Border radius ones... then in the current CSS/Classes, insert border radius that match the ones found from the source.

It's by no means "lightweight"... but if all you care about is the ability to do it, and not the drain on resources... it should work.

Do these link help?
http://www.quirksmode.org/dom/changess.html
http://www.howtocreate.co.uk/tutorials/javascript/domstylesheets <- the part "Stylesheet cssRules collection" which describes adding and deleting CSS rules looks promising.

Originally posted by Alpha-Toxic:

styles = sheets.cssRules;

This will throw if the stylesheet is from another domain.

Originally posted by Alpha-Toxic:

if (styles[j].cssText.match(r))
styles[j].cssText.replace(r, "$1");

This is underperformant, and regexp evaluation is expensive.
Just do the replace().

I tried this a while ago and, while it worked on inline styles fairly well because I could get at the original CSS, I couldn't find any way to fix linked sheets. Instead, I built a widget that loads all the stylesheets on a page, fixes them, and spits out a user stylesheet you can apply to the offending page. Since it's a widget instead of userjs, there's no problem with security. The link is in my signature.