JavaScript only displays browser specific CSS prefixes even when others are added

Question

I'm adding CSS Rules directly to the stylesheet via Javascript:

document.styleSheets[0].cssRules[4].style.borderRadius="10px";
document.styleSheets[0].cssRules[4].style.webkitBorderRadius="10px";
document.styleSheets[0].cssRules[4].style.mozBorderRadius="10px";

I need to display these rules later on:

document.write(document.styleSheets[0].cssRules[4].cssText);

But each browser displays only its own prefixes, for example, when I'm on Chrome, I get only:

-webkit-border-radius:10px;

When I'm on Firefox, I get only:

-moz-boder-radius:10px;

How can I display them all regardless of the browser I'm using?

PS: I cannot use something like document.getElementById("foo").style.width; to display CSS, using styleSheets[] and cssRules[] is a must.

Answer 1

You can't, because they don't exist. The browser ignores the styles that it doesn't regocnise, so the are never added to the style sheet.