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.
JavaScript only displays browser specific CSS prefixes even when others are added
-
09-03-2022 - |
题
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.
解决方案
不隶属于 StackOverflow