JavaScript 仅显示浏览器特定的 CSS 前缀，即使添加了其他前缀也是如此

Question

我通过 Javascript 将 CSS 规则直接添加到样式表:

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

稍后我需要显示这些规则:

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

但是每个浏览器只显示自己的前缀，例如，当我在 Chrome 上时，我只得到:

-webkit-border-radius:10px;

当我使用 Firefox 时，我只会得到:

-moz-boder-radius:10px;

无论我使用的是什么浏览器，我如何才能全部显示它们？

PS:我不能使用 document.getElementById("foo").style.width; 之类的东西来显示 CSS，使用 styleSheets[] 和 cssRules[] 是必须的。

Answer 1

你不能，因为它们不存在。浏览器会忽略它不识别的样式，因此它们永远不会添加到样式表中。