entityMap|blocks|key|cg8ud|text|您可以使用简单的ajax加载内容get如果包含来自同一域的样式表，则调用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|e1db2|编辑|1dg0u|更新后：|aef3q|我尝试了这段代码(在FX10上)作为概念证明+这只使用了一次对CSS的请求，但在我看来有点老生常谈，应该进行测试和验证。如果javascript不可用，也应该通过一些回退来改进它。CSS+(外部文件test.css)|3k8fb|div+{+border:+3px+solid+red;}|code-block|syntax|javascript|dupci|HTML/jQuery|75r60|++++++++$(document).ready(function()+{

++++++++++++$.when($.get("test.css"))
++++++++++++.done(function(response)+{
++++++++++++++++$('').text(response).appendTo($('head'));
++++++++++++++++$('div').html(response);
++++++++++++});
++++++++})
</code></pre>
<div>您应该会在div中看到带有红色边框的CSS代码:)</div>
<div>尽情享受吧。</div>^0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|R|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|S|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|T|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|U|9|@]|A|@]|B|$]]|$2|I|4|J|6|K|8|V|9|@]|A|@]|B|$L|M]]|$2|N|4|O|6|7|8|W|9|@]|A|@]|B|$]]|$2|P|4|Q|6|K|8|X|9|@]|A|@]|B|$L|M]]]]

you could load the content with a simple ajax <code>get</code> call, if stylesheet is included from the same domain

Edit after your update: I tried this code (on FX10) as a proof of concept that uses only one request to the CSS but it seems a bit hacky to me and should be tested and verified. it also should be improved with some fallback if javascript is not available.

CSS (external file test.css)

<pre><code>div { border: 3px solid red;}
</code></pre>

HTML/jQuery

<pre><code>&lt;!doctype html &gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;!-- provide a fallback if js not available --&gt;
 &lt;noscript&gt;
 &lt;link rel="stylesheet" href="test.css" /&gt;
 &lt;/noscript&gt;
 &lt;/head&gt;
 &lt;body&gt;

 &lt;div&gt;&lt;/div&gt;

 &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"&gt;&lt;/script&gt;
 &lt;script&gt;
 $(document).ready(function() {

 $.when($.get("test.css"))
 .done(function(response) {
 $('&lt;style /&gt;').text(response).appendTo($('head'));
 $('div').html(response);
 });
 })
 &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>

You should see the CSS code inside the div with a red border all around :) 
Enjoy.

entityMap|blocks|key|78a8s|text|我认为最好的办法是用ajax加载它，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|di38i|$.get("/path/to/file.css",+function(cssContent){
++++alert("My+CSS+=+"+%2B+cssContent);
});|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

I think your best bet would be to load it with ajax with something like:

<pre><code>$.get("/path/to/file.css", function(cssContent){
 alert("My CSS = " + cssContent);
});
</code></pre>

entityMap|blocks|key|e4rp|text|是的，你可以使用$.get。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2negb|示例：|2vb9b|$.get('/path/to/css/file.css',+function+(resp)+{
++++//+resp+now+should+contain+your+CSS+file+content.

});|code-block|syntax|javascript^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|L|9|@]|A|@]|B|$H|I]]]]

entityMap|blocks|key|6n31r|text|这样就可以了特定示例(其中CSS与页面位于同一来源)，您可以通过将文件作为文本读取ajax|type|unstyled|depth|inlineStyleRanges|entityRanges|data|egelk|$.ajax({
++++url:+"/path/to/file.css",
++++dataType:+"text",
++++success:+function(cssText)+{
++++++++//+cssText+will+be+a+string+containing+the+text+of+the+file
++++}
});|code-block|syntax|javascript|65i9b|如果您想以更结构化的方式访问信息，document.styleSheets是与文档关联的样式表数组。每个样式表都有一个名为cssRules(或仅在某些浏览器上rules)，它是样式表中每个规则的文本数组。每条规则都有一个cssText属性。所以你可以遍历它们，例如：|b9ptp|$.each(document.styleSheets,+function(sheetIndex,+sheet)+{
++++console.log("Looking+at+styleSheet["+%2B+sheetIndex+%2B+"]:");
++++$.each(sheet.cssRules+%7C%7C+sheet.rules,+function(ruleIndex,+rule)+{
++++++++console.log("rule["+%2B+ruleIndex+%2B+"]:+"+%2B+rule.cssText);
++++});
});|cb4an|活生生的例子-这个例子有一个样式表和两个规则。^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|O|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|P|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|Q|9|@]|A|@]|B|$F|G]]|$2|L|4|M|6|7|8|R|9|@]|A|@]|B|$]]]]

With that specific example (where the CSS is on the same origin as the page), you could read the file as text via <code>ajax</code>:
<pre><code>$.ajax({
 url: &quot;/path/to/file.css&quot;,
 dataType: &quot;text&quot;,
 success: function(cssText) {
 // cssText will be a string containing the text of the file
 }
});
</code></pre>
If you want to access the information in a more structured way, <code>document.styleSheets</code> is an array of the style sheets associated with the document. Each style sheet has a property called <code>cssRules</code> (or just <code>rules</code> on some browsers), which is an array of the text of each rule in the style sheet. Each rule has a <code>cssText</code> property. So you could loop through those, e.g.:
<pre><code>$.each(document.styleSheets, function(sheetIndex, sheet) {
 console.log(&quot;Looking at styleSheet[&quot; + sheetIndex + &quot;]:&quot;);
 $.each(sheet.cssRules || sheet.rules, function(ruleIndex, rule) {
 console.log(&quot;rule[&quot; + ruleIndex + &quot;]: &quot; + rule.cssText);
 });
});
</code></pre>
<a href="http://jsbin.com/apunuc/46" rel="nofollow noreferrer">Live example</a> - That example has one stylesheet with two rules.

entityMap|blocks|key|f7rnf|text|最接近获得样式表的地方不使用ajax实际上是遍历所有CSS规则并将它们连接成一个字符串。这将生成删除了所有注释和多余空格的原始文件。这是有道理的，因为浏览器只需要将解析的样式表保存在内存中，而不是原始文件。它只有3行代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|a2sl6|function+css_text(x)+{+return+x.cssText;+}
var+file+=+document.getElementById('css');
var+content+=+Array.prototype.map.call(file.sheet.cssRules,+css_text).join('\n');|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

The closest you can get to obtaining the stylesheet without using ajax is to indeed iterate over all CSS rules and concatenate them into a string. This yields the original file with all comments and excess whitespace removed. Which makes sense, as the browser only needs to keep the parsed style sheet in memory, not the original file. It is only 3 lines of code:

<pre><code>function css_text(x) { return x.cssText; }
var file = document.getElementById('css');
var content = Array.prototype.map.call(file.sheet.cssRules, css_text).join('\n');
</code></pre>

entityMap|blocks|key|e78ue|text|如果您使用XMLHttpRequest加载页面，则可以访问这些文件，而不必再次加载它们。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2vfmb|最好不要重复，这会降低带宽和效率。|875vg|如果css是动态生成的，并且根据请求时间的不同而不同，该怎么办？^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|I|9|@]|A|@]|B|$]]]]

If you used XMLHttpRequest to load the page you could get acces to those files without having to load them a second time.

it's preferable to not duplicate ton reduce bandwidth and efficiency.

what if the css is generated dynamically and is different depending on the time it is requested?

entityMap|blocks|key|72k3n|text|您可以使用以下命令访问已加载的CSS++document.styleSheets+..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

You can access your loaded CSS by using document.styleSheets.

Is it possible to get the entire text content of a CSS file in a document? F.ex:

<pre><code>&lt;link rel="stylesheet" id="css" href="/path/to/file.css"&gt;
&lt;script&gt;
 var cssFile = document.getElementById('css');
 // get text contents of cssFile
&lt;/script&gt;
</code></pre>

I’m not really into getting all the CSS rules via document.styleSheets, is there another way?

Update: There is the ajax option of course, I appreciate the answers given. But it seems rather unnecessary to reload a file using ajax that is already loaded in the browser. So if anyone knows another way to extract the text contents of a present CSS file (NOT the CSS rules), please post!

Access CSS file contents via JavaScript

jQuery

 可以在文档中获取CSS文件的全部文本内容吗？F.ex： var cssFile = document.getElementById('css');    // get text contents of cssFile 我不是很喜欢通过document.styleSheets获取所有的CSS规则，还有其他方法吗？ 更新...

问通过JavaScript访问CSS文件内容
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过JavaScript访问CSS文件内容EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过JavaScript访问CSS文件内容
EN