it-swarm.com.de

Zugriff auf CSS-Dateiinhalte über JavaScript

Ist es möglich, den gesamten Textinhalt einer CSS-Datei in einem Dokument abzurufen? F.ex:

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

Ich bin nicht wirklich daran interessiert, alle CSS-Regeln über document.styleSheets zu bekommen. Gibt es einen anderen Weg?

Update: Es gibt natürlich die Ajax-Option, ich schätze die Antworten. Es scheint jedoch ziemlich unnötig zu sein, eine Datei mit ajax neu zu laden, die bereits im Browser geladen ist. Wenn also jemand eine andere Möglichkeit zum Extrahieren des Textinhalts einer vorhandenen CSS-Datei kennt (NICHT die CSS-Regeln), bitte posten!

19
David Hellsing

sie können den Inhalt mit einem einfachen ajax-Aufruf get laden, wenn Stylesheet aus derselben Domäne stammt

Bearbeiten nach deinem Update: 
Ich habe diesen Code (auf FX10) als Proof of Concept ausprobiert, der nur eine Anfrage an das CSS verwendet, aber es erscheint mir etwas hackig und sollte getestet und verifiziert werden. Es sollte auch mit etwas Fallback verbessert werden, wenn Javascript nicht verfügbar ist.

CSS (externe Datei 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>

Sie sollten den CSS-Code im div mit einem roten Rand sehen :)
Genießen.

20
fcalderan

Mit diesem spezifischen Beispiel (wobei sich das CSS in derselben Domäne befindet wie die Seite), können Sie die Datei über ajax als Text lesen:

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

Wenn Sie auf die Informationen strukturierter zugreifen möchten, ist document.styleSheets ein Array der Stylesheets, die dem Dokument zugeordnet sind. Jedes Stylesheet verfügt über eine Eigenschaft namens cssRules (oder nur rules in einigen Browsern), bei der es sich um ein Array des Textes jeder Regel im Stylesheet handelt. Jede Regel hat eine cssText-Eigenschaft. So könnten Sie diese durchlaufen, z.

$.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);
    });
});

Live-Beispiel - Dieses Beispiel enthält ein Stylesheet mit zwei Regeln.

24
T.J. Crowder

Am ehesten können Sie das Stylesheet erhalten ohne ajax zu verwenden , um alle CSS-Regeln zu durchlaufen und sie zu einem String zu verketten. Dadurch wird die Originaldatei mit allen Kommentaren und übermäßigem Leerzeichen entfernt. Das ist sinnvoll, da der Browser nur das geparste Stylesheet im Speicher behalten muss, nicht die Originaldatei. Es sind nur 3 Zeilen 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');
4
bcmpinc

Ich denke, Ihre beste Wette wäre, es mit ajax zu laden:

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

Ja, Sie können $ .get verwenden.

Beispiel:

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

});
2
Geddy

Wenn Sie XMLHttpRequest zum Laden der Seite verwendet haben, können Sie auf diese Dateien zugreifen, ohne sie ein zweites Mal laden zu müssen.

es ist vorzuziehen, die Tonne nicht zu duplizieren, um die Bandbreite und Effizienz zu reduzieren.

was passiert, wenn die css dynamisch generiert wird und je nach zeit unterschiedlich ist?

0
yan bellavance