从浏览器获取原始 CSS 文件内容
有没有办法获取 CSS 文件的原始内容？
让我们想象一下，我想从 CSS 文件中获取任何特定于供应商的 CSS 属性。我需要以某种方式获取 CSS 内容并相应地解析它们。或者我可以只使用 DOM 来访问 CSS 文件的规则。
问题是，在使用 DOM 时，大多数浏览器（<= IE8 除外）倾向于删除所有与其浏览器引擎无关的自定义属性（webkit 删除 -moz 和 -o 和 -ms ）。因此不可能获取 CSS 内容。
如果我使用 AJAX 来获取 CSS 文件的内容，那么如果该 CSS 文件托管在另一个域上，那么同源策略将被破坏，并且无法获取 CSS 内容。
如果要使用跨域 AJAX 方法，那么只会有一种 JSONP 解决方案，该解决方案不起作用，因为我们没有解析任何 javascript 代码（因此没有回调）。
还有其他方法可以获取内容吗？
Is there any way to fetch the raw contents of a CSS file?
Lets imagine that I wanted to fetch any vendor-specific css properties from a CSS file. I would need to somehow grab the CSS contents and parse them accordingly. Or I could just use the DOM to access the rules of a CSS file.
The problem is that in while using the DOM, mostly all browsers (except for <= IE8) tend to strip out all of the custom properties that do not relate to their browser engine (webkit strips out -moz and -o and -ms). Therefore it wouldn't be possible to fetch the CSS contents.
If I were to use AJAX to fetch the contents of the CSS file, then if that CSS file hosted on another domain, then the same origin policy would break and the CSS contents could not be fetched.
If one were to use a cross-domain AJAX approach then there would only be a JSONP solution which wouldn't work since we're not parsing any javascript code (therefore there is no callback).
Is there any other way to fetch the contents?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
如果 CSS 文件与运行脚本的页面位于同一域中，则可以使用 AJAX 来提取 CSS 文件：
如果不是，您可以尝试使用 Yahoo!通过管道作为代理并使用 JSONp 获取 CSS。
至于解析，你可以查看 Sizzle 来解析选择器。您还可以使用 CSS 语法（在 CSS 标准中发布）来使用 JS lex/yacc 解析器来解析文档。我会让你发挥创意。
祝你好运！
If a CSS file is on the same domain as the page you're running the script on, you can just use AJAX to pull in the CSS file:
If not, you could try using Yahoo! Pipes as a proxy and get the CSS with JSONp.
As for parsing, you can check out Sizzle to parse the selectors. You could also use the CSS grammar (posted in the CSS standards) to use a JS lex/yacc parser to parse out the document. I'll leave you to get creative with that.
Good luck!
不，你已经几乎涵盖了它。 IE 以外的浏览器会从
style/currentStyle对象和document.styleSheets接口中的对象模型中删除未知规则。 （当然，您要修补的 CSS 通常是 IE6-7。）如果您想从外部域获取样式表，则需要代理辅助 AJAX。解析 CSS 将是一项艰巨的工作，特别是如果您需要复制浏览器的怪癖。我会极力避免此类事情！
No, you've pretty much covered it. Browsers other than IE strip out unknown rules from their object models both in the
style/currentStyleobjects and in thedocument.styleSheetsinterface. (It's usually IE6-7 whose CSS you want to patch up, of course.)If you wanted to suck a stylesheet from an external domain you would need proxy-assisted-AJAX. And parsing CSS from would be a big nasty job, especially if you needed to replicate browser quirks. I would strenuously avoid any such thing!
JSONP 仍然是一个有效的解决方案，尽管它会有点伤害眼睛。基本上，除了回调填充之外，您还必须添加一个 JSON 属性“padding”并将 CSS 作为值传递。例如，对脚本的调用 http://myserver.com/file2jsonp/ ?jsonp=myCallback&textwrapper=cssContents 可能会返回：
您必须对所有换行符进行文本编码，并将 CSS 文件的内容用引号括起来（在对任何现有引号进行编码之后）。我不得不借助 Twitter XML feed 来完成此操作。当我建造它时，感觉这是一个可怕的想法，但它完成了它的工作。
JSONP is still a valid solution, though it would hurt the eyes somewhat. Basically, in addition to the callback padding, you would have to add one JSON property "padding" and pass the CSS as a value. For example, a call to a script, http://myserver.com/file2jsonp/?jsonp=myCallback&textwrapper=cssContents could return this:
You'd have to text-encode all line breaks and wrap the contents of the CSS file in quotes (after encoding any existing quotes). I had to resort to doing this with a Twitter XML feed. It felt like such a horrible idea when I built it, but it did its job.