web-dev-qa-db-ja.com

JavaScriptを介してCSSファイルのコンテンツにアクセスする

ドキュメント内のCSSファイルのテキストコンテンツ全体を取得することは可能ですか？ F.ex：

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

Document.styleSheetsを介してすべてのCSSルールを取得するのはあまり好きではありません。別の方法はありますか？

pdate：もちろんajaxオプションがあります。与えられた答えに感謝します。しかし、ブラウザにすでにロードされているajaxを使用してファイルをリロードすることはどちらかと言えば不必要に思えます。したがって、誰かが現在のCSSファイル（CSSルールではない）のテキストコンテンツを抽出する別の方法を知っている場合は、投稿してください！

javascriptjquerycssstylesheet
24
David Hellsing

同じドメインからスタイルシートが含まれている場合、単純なajax get呼び出しでコンテンツをロードできます

編集更新後：
CSSへの要求を1つだけ使用する概念実証としてこのコードを（FX10で）試しましたが、少しハックに見えます私に、そしてテストされ、確認されるべきです。また、JavaScriptが使用できない場合のフォールバックも改善されます。

CSS（外部ファイルtest.css）

div { border: 3px solid red;}

HTML/jQuery

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

        <div></div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
        <script>
        $(document).ready(function() {

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

Divの中にCSSコードが表示され、周りに赤い枠が表示されます。
楽しい。

20
Fabrizio Calderan

specificの例（CSSがページと同じドメインにある場合）では、ajaxを介してファイルをテキストとして読み取ることができます：

$.ajax({
    url: "/path/to/file.css",
    dataType: "text",
    success: function(cssText) {
        // cssText will be a string containing the text of the file
    }
});

より構造化された方法で情報にアクセスする場合は、document.styleSheetsは、ドキュメントに関連付けられたスタイルシートの配列です。各スタイルシートには、cssRules（または一部のブラウザーではrules）というプロパティがあります。これは、スタイルシートの各ルールのテキストの配列です。各ルールにはcssTextプロパティがあります。だからあなたはそれらをループすることができます、例えば：

$.each(document.styleSheets, function(sheetIndex, sheet) {
    console.log("Looking at styleSheet[" + sheetIndex + "]:");
    $.each(sheet.cssRules || sheet.rules, function(ruleIndex, rule) {
        console.log("rule[" + ruleIndex + "]: " + rule.cssText);
    });
});

実例 -この例には、2つのルールを持つ1つのスタイルシートがあります。

25
T.J. Crowder

スタイルシートの取得に最も近い方法ajaxを使用せずには、実際にすべてのCSSルールを反復処理し、それらを文字列に連結することです。これにより、すべてのコメントと余分な空白が削除された元のファイルが生成されます。ブラウザーは、解析されたスタイルシートをメモリに保持するだけでよく、元のファイルを保持する必要がないので、これは理にかなっています。コードはわずか3行です。

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');
5
bcmpinc

私はあなたの最善の策はそれを次のようなものでajaxでロードすることだと思います：

$.get("/path/to/file.css", function(cssContent){
    alert("My CSS = " + cssContent);
});
4
Adam Rackis

はい、$。getを使用できます。

例：

$.get('/path/to/css/file.css', function (resp) {
    // resp now should contain your CSS file content.

});
2
Geddy

XMLHttpRequestを使用してページをロードした場合、2回目にロードしなくてもこれらのファイルにアクセスできます。

帯域幅と効率を低下させるトンを複製しないことが望ましいです。

cSSが動的に生成され、要求された時間に応じて異なる場合はどうなりますか？

0
yan bellavance