web-dev-qa-db-fra.com

Accéder au contenu du fichier CSS via JavaScript

Est-il possible d’obtenir l’intégralité du texte d’un fichier CSS dans un document? F.ex:

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

Je ne suis pas vraiment intéressé par toutes les règles CSS via document.styleSheets, existe-t-il un autre moyen?

Mise à jour: Il y a bien sûr l'option ajax, j'apprécie les réponses fournies. Mais il semble plutôt inutile de recharger un fichier en utilisant ajax qui est déjà chargé dans le navigateur. Donc, si quelqu'un connaît un autre moyen d'extraire le contenu du texte d'un fichier CSS actuel (PAS les règles CSS), merci de poster!

javascriptjquerycssstylesheet
19
David Hellsing

vous pouvez charger le contenu avec un simple appel ajax get, si stylesheet est inclus à partir du même domaine

Edit après votre mise à jour: 
J'ai essayé ce code (sur FX10) comme un proof of concept qui n'utilise qu'une requête au CSS, mais il me semble un peu hacky et doit être testé et vérifié. il devrait également être amélioré avec un certain repli si javascript n'est pas disponible.

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

Vous devriez voir le code CSS à l'intérieur de la div avec une bordure rouge tout autour :)
Prendre plaisir.

20
fcalderan

Avec cet exemple spécifique (où le CSS se trouve sur le même domaine que la page), vous pouvez lire le fichier sous forme de texte via ajax:

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

Si vous souhaitez accéder aux informations de manière plus structurée, document.styleSheets est un tableau des feuilles de style associées au document. Chaque feuille de style a une propriété appelée cssRules (ou simplement rules sur certains navigateurs), qui est un tableau du texte de chaque règle de la feuille de style. Chaque règle a une propriété cssText. Donc, vous pouvez les parcourir, par exemple:

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

Exemple live - Cet exemple a une feuille de style avec deux règles.

24
T.J. Crowder

Le plus près que vous puissiez obtenir pour obtenir la feuille de style sans utiliser ajax est bien de parcourir toutes les règles CSS et de les concaténer dans une chaîne. Cela donne le fichier d'origine avec tous les commentaires et les espaces en excès supprimés. Ce qui est logique, car le navigateur n'a besoin que de conserver la feuille de style analysée en mémoire, pas le fichier d'origine. Ce ne sont que 3 lignes de 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

Je pense que votre meilleur pari serait de le charger avec ajax avec quelque chose comme:

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

Oui, vous pouvez utiliser $ .get.

Exemple:

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

});
2
Geddy

Si vous avez utilisé XMLHttpRequest pour charger la page, vous pouvez accéder à ces fichiers sans avoir à les charger une seconde fois.

il est préférable de ne pas dupliquer votre matériel pour réduire la bande passante et l'efficacité.

que se passe-t-il si le css est généré dynamiquement et est différent selon le moment où il est demandé?

0
yan bellavance