Accéder au contenu des fichiers CSS via JavaScript

Question

Accéder au contenu des fichiers CSS via JavaScript

Demandé el 7 de Février, 2012: Quand la question a-t-elle été
50308 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Est-il possible d'obtenir le contenu textuel complet d'un fichier CSS dans un document ? Par exemple

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

Je n'ai pas vraiment envie de récupérer toutes les règles CSS via document.styleSheets, y a-t-il un autre moyen ?

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

Demandé el 7 de Février, 2012 par David

Answer 1

5 Réponses

Answer 2

32voto

T.J. Crowder Points 285826

Avec cela spécifique (où le CSS est à la même origine que la page), vous pourriez lire le fichier en tant que 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 possède une propriété appelée cssRules (ou simplement rules sur certains navigateurs), qui est un tableau contenant le texte de chaque règle de la feuille de style. Chaque règle a un cssText propriété. Vous pouvez donc les parcourir en boucle, 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 concret - Cet exemple comporte une feuille de style avec deux règles.

Répondu el 7 de Février, 2012 par T.J. Crowder (285826 Points )

Answer 3

22voto

Fabrizio Calderan Points 43398

Vous pourriez charger le contenu avec un simple ajax get si la feuille de style est incluse à partir du même domaine.

Editar après votre mise à jour :
J'ai essayé ce code (sur FX10) en tant que preuve de concept qui n'utilise qu'une seule requête au CSS mais cela me semble un peu bricolé et devrait être testé et vérifié. il devrait également être amélioré avec une solution de 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 du div avec une bordure rouge tout autour :)
Profitez-en.

Répondu el 7 de Février, 2012 par Fabrizio Calderan (43398 Points )

Answer 4

6voto

bcmpinc Points 430

Le plus proche que vous pouvez obtenir de la feuille de style sans utiliser ajax consiste en effet à itérer sur toutes les règles CSS et à les concaténer en une chaîne de caractères. On obtient ainsi le fichier d'origine avec tous les commentaires et les espaces blancs superflus supprimés. Ce qui est logique, puisque le navigateur n'a besoin de garder en mémoire que la feuille de style analysée, et non le fichier original. Il ne s'agit que de 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');

Répondu el 29 de Septembre, 2015 par bcmpinc (430 Points )

Answer 5

4voto

Adam Rackis Points 45559

Je pense que votre meilleure chance serait de le charger avec ajax avec quelque chose comme :

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

Répondu el 7 de Février, 2012 par Adam Rackis (45559 Points )

Answer 6

2voto

Geddy Points 85

Oui, vous pouvez utiliser $.get.

Exemple :

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

});

Répondu el 7 de Février, 2012 par Geddy (85 Points )

Accéder au contenu des fichiers CSS via JavaScript

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Accéder au contenu des fichiers CSS via JavaScript

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: