使用 Javascript 读取外部 css

Question

所以如果有一个外部css文件，比如：

<link rel='stylesheet' type='text/css' href='test.css'>  

如果我们想使用 javascript 读取样式表，我们可以这样做：

document.styleSheets[0].cssRules[0].cssText; (for example for first rule)

它在 Firefox 中运行良好，但同样的语句在 chrome 中出现错误，类似于 Type Error: "non_object_property_load"。

可能是什么问题，我们如何阅读 chrome 中的样式表？

请看看我面临的问题：

http://s4.postimage.org/x5q0xt1vh/file.png  

编辑：所以当测试文件和链接的 css 放在系统本地并且不能通过网络服务器访问时，问题就来了。

Answer 1

好的，我发现了问题。这确实与安全相关，如果外部 css 与 firefox 位于同一目录中但不适用于 chrome，则此方法有效。
如果 css 文件在另一个目录或在线，它在 firefox 中也不起作用。

现在为了解决这个问题，我使用参数--allow-file-access-from-files 启动了 chrome，现在它运行良好。

Answer 2

http://www.quirksmode.org/dom/w3c_css.html - Chrome 不支持 .cssText

Answer 3

这适用于 Chrome（至少 14 个）：

document.styleSheets[0].cssRules[0].cssText

这会给你规则。虽然这样：

document.styleSheets[0].cssRules[0].cssText[0]

会给你第一条规则的第一个字母。