Accès le contenu du fichier CSS via JavaScript
Est-il possible d'obtenir l'ensemble du contenu 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 dans l'obtention de toutes les règles CSS via document.les feuilles de style, est-il une autre voie?
Mise à jour: Il y a de l'ajax option de cours, j'apprécie les réponses données. Mais il semble plutôt inutile de recharger un fichier à l'aide d'ajax qui est déjà chargé dans le navigateur. Donc si quelqu'un connait un autre moyen d'extraire le texte contenu d'un fichier CSS (PAS les règles CSS), merci de poster!
- double possible de Comment lire des fichiers CSS avec jQuery
- Voulez-vous modifier les propriétés css d'un élément à l'aide de jquery ou de certains autres js technologie. ?
- vous souhaitez la compléter fichier css ??
- ce n'est pas une dup, comme indiqué, je ne suis pas intéressé dans l'analyse CSS valeurs à partir d'une feuille de style, j'aimerais extraire l'intégralité du contenu d'un texte.
- non, je veux que tout le contenu. Comme vous obtenez lorsque vous effectuez une requête ajax vers un fichier texte.
- Remarque en ce qui concerne votre mise à jour: le fichier CSS doit être dans le cache de votre navigateur et en supposant que votre serveur ne permet pas de dire au navigateur que le fichier ne doit pas être mis en cache pour une raison quelconque, vous finirez par la lecture de la version mise en cache et non pas la version du serveur et qui devrait être rapide.
Vous devez vous connecter pour publier un commentaire.
vous pouvez charger le contenu avec un simple ajax
get
appel, si la feuille de style est inclus dans le même domaineModifier après votre mise à jour:
j'ai essayé ce code (sur FX10) comme un preuve de concept qui utilisent une seule demande pour le CSS mais il semble un peu hacky pour moi, et doivent être testés et vérifiés. il doit également être amélioré avec quelques secours si javascript n'est pas disponible.
CSS (fichier externe test.css)
HTML/jQuery
Vous devriez voir le code CSS à l'intérieur de la div avec une bordure rouge autour 🙂
Profitez de.
text
, pashtml
. Vivre copie de votre code à l'aide detext
: jsbin.com/elopaknoscript
danshead
(ou presque partout ailleurs), référence. Cela dit, si, si c'est d'accord pour attendre le CSS jusqu'à ce qu'un appel ajax est terminée, je mettrais l'noscript
au bas du document.noscript
truc en bas, juste avant la</html>
.Avec qui spécifiques exemple (où le CSS est dans le même domaine que la page), vous pouvez lire le fichier texte via
ajax
:Si vous souhaitez accéder à l'information de manière plus structurée,
document.styleSheets
est un ensemble de feuilles de style associées au document. Chaque feuille de style a une propriété appeléecssRules
(ou justerules
sur certains navigateurs), qui est un tableau de texte de chaque règle dans la feuille de style. Chaque règle a unecssText
de la propriété. Donc, vous pourriez faire une boucle par ceux, par exemple:Live exemple - Exemple a une feuille de style avec deux règles.
createTextNode
plutôt que de simplement à l'aide de jQuerytext
fonction, mais... (mise à Jour: IE6 n'est pas encore ça aveccreateTextNode
, mais bien, si vous avez deux se sur de vieux IEs.)document.documentElement.innerHTML
.innerHTML
de la propriété, le navigateur crée HTML chaîne de caractères représentant l'état actuel de l'arbre du DOM pour l'élément (dans ce cas, l'ensemble du document), vous accéder sur. Ce n'est pas du tout la même que la source de la page, qui peut être formaté différemment, peut-être en fait été différent parce que la manipulation DOM a été fait depuis, pourrait avoir omis de balises que le navigateur comprend, peut avoir eu des commentaires, les navigateurs ne pas conserver, différents citant autour des attributs, etc., etc.Je pense que votre meilleur pari serait de les charger en ajax avec quelque chose comme:
Le plus proche que vous pouvez obtenir à l'obtention de la feuille de style sans l'aide d'ajax est en effet itérer sur toutes les règles CSS et les concaténer dans une chaîne. Cela donne le fichier d'origine avec tous les commentaires et les espaces en trop enlevé. Ce qui est logique, car le navigateur ne doit garder l'analyse de la feuille de style dans la mémoire, pas le fichier d'origine. Il est à seulement 3 lignes de code:
Yep, vous pouvez utiliser $.obtenez de l'.
Exemple:
Si vous avez utilisé XMLHttpRequest pour charger la page, vous pourriez obtenir l'accès à ces fichiers sans avoir à les charger une seconde fois.
il est préférable de ne pas dupliquer ton réduire la bande passante et de l'efficacité.
que si le css est généré dynamiquement et est différent selon le temps, il est demandé?