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

时间:2013-02-14 08:00:23

标签: javascript html css browser vendor-prefix

我正在通过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[]是必须的。

1 个答案:

答案 0 :(得分:3)

你不能,因为它们不存在。浏览器会忽略它不会重新定位的样式,因此它们永远不会添加到样式表中。