我通过 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[]
是必须的。
最佳答案
你不能,因为它们不存在。浏览器会忽略它不识别的样式,因此它们永远不会添加到样式表中。
关于JavaScript 仅显示浏览器特定的 CSS 前缀,即使添加了其他前缀也是如此,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14870249/