J'essaie de trouver un bon moyen de collecter les noms des classes définies dans les feuilles de style incluses avec un document donné. Je sais sur i peut extraire un tableau comme Je cherche partout pour un bon moyen de faire quelque chose comme ça et jusqu'à présent, j'ai fait peu de progrès. Quelqu'un a-t-il une idée de la façon de sortir ça? Merci! document.stylesheetlist mais il ne semble pas que ce soit facile à analyser. Ce que je cherche, c'est quelque chose comme, pour un document de la feuille de style, tel que: ["my_class", "second_class"] . Cela assume évidemment le scénario favorable d'une DOM et de feuilles de style entièrement chargées.
5 Réponses :
Qu'en est-il de
.Quelque chose .her_something?
Voulez-vous un pool de noms de classe qui existent? Ou un pool de sélecteurs?
Quoi qu'il en soit, avez-vous essayé d'itération via Document.StylesSheets [i] .csrules? Cela vous donne le texte du sélecteur. Analysant que, avec certains Regexp Kungfu, devrait être plus facile ...
Avez-vous besoin que cela soit croisé?
En fait, j'ai utilisé document.stylesheets []. CSRULES dans ma mise en œuvre, mais un peu supposé qu'il y aurait une autre façon (je pensais en fait par erreur JQuery incluait cette fonctionnalité - je pourrais aussi bien y contribuer maintenant que Je suis passé à travers dessus).
Vous pouvez y accéder avec jQuery. Exemple serait
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var allobjects = $("*")
});
</script>
Cela permettra de saisir tous les éléments HTML dans un document. Cela ne dira rien de la feuille de style.
J'aime beaucoup cette réponse. Je ne sais pas pourquoi la baisse vote. Vous pouvez afficher tous les objets de document dans un tableau et lire leurs classes ... Les classes définis dans les feuilles de style incluses avec un document donné vous devez d'abord obtenir les éléments pour décider quelles classes sont utilisées. dans le document.
Oh je vois la confusion. OP tente de lire les styles dans toutes les feuilles de style incluses, pas des classes de tous les objets de document. Vaguement libellé.
Mon mauvais avec le libellé - je veux que les sélecteurs définis dans des feuilles de style inclus dans / ou liés à partir du document. J'ai fini par aller avec la traversée du tableau Document.StylesSheets.
Vous étiez sur la bonne voie avec Document.StylesSheets (https://developer.mozilla.org/fr/dom/document.stylesheets)
a href = "https://developer.mozilla.org/fr/ DOM / stylesheet.cssrules "rel =" nofollow "> https://developer.mozilla.org/fr/dom/stylesheet.cssrules p>
Voici une méthode rapide et sale pour produire toute la classe Selectortexts à la console dans Firefox + Firebug. P>
var currentSheet = null;
var i = 0;
var j = 0;
var ruleKey = null;
//loop through styleSheet(s)
for(i = 0; i<document.styleSheets.length; i++){
currentSheet = document.styleSheets[i];
///loop through css Rules
for(j = 0; j< currentSheet.cssRules.length; j++){
//log selectorText to the console (what you're looking for)
console.log(currentSheet.cssRules[j].selectorText);
//uncomment to output all of the cssRule contents
/*for(var ruleKey in currentSheet.cssRules[j] ){
console.log(ruleKey +': ' + currentSheet.cssRules[j][ruleKey ]);
}*/
}
}
Quand je le fais, je reçois: SecurityError: L'opération n'est pas sécurisée. pour (j = 0; j
Cela affichera toutes les règles définies dans les feuilles de style.
var allRules = [];
var sSheetList = document.styleSheets;
for (var sSheet = 0; sSheet < sSheetList.length; sSheet++)
{
var ruleList = document.styleSheets[sSheet].cssRules;
for (var rule = 0; rule < ruleList.length; rule ++)
{
allRules.push( ruleList[rule].selectorText );
}
}
En fait, j'ai mis en œuvre quelque chose de très similaire à la fin (disponible ici: gist.github.com/774111 ).
@Fred, juste jeté un coup d'œil sur votre code dans GitHub .. Pour les classes définies, vous devez prendre en compte .class1.class2 , tag.class et #id. Classe Les cas .. Pour les inutilisés, soyez prudent car certaines classes peuvent être utilisées à partir de JavaScript ( Evénements, etc. ) afin qu'ils ne soient donc pas dans le DOM lorsque vous vérifiez le DOM ( Si cette affaire est importante pour vous .. )
non capturé DomException: Impossible de lire la propriété "CSSRules" de "CSSSTYLESHEEET": impossible d'accéder aux règles
@ Berto99 Oui, ce serait des fichiers CSS sur un domaine différent. Les navigateurs n'accordent pas accès à ceux de cette API.
Ce n'est probablement pas quelque chose que vous voulez vraiment faire, sauf dans le cadre d'un processus de refactoring, mais voici une fonction qui devrait faire ce que vous voulez:
function getClasses() {
var classes = {};
// Extract the stylesheets
return Array.prototype.concat.apply([], Array.prototype.slice.call(document.styleSheets)
.map(function (sheet) {
if(null == sheet || null == sheet.cssRules) return;
// Extract the rules
return Array.prototype.concat.apply([], Array.prototype.slice.call(sheet.cssRules)
.map(function(rule) {
// Grab a list of classNames from each selector
return rule.selectorText.match(/\.[\w\-]+/g) || [];
})
);
})
).filter(function(name) {
// Reduce the list of classNames to a unique list
return !classes[name] && (classes[name] = true);
});
}
Existe-t-il une amélioration qui permettra de contourner une propriété nulle.cssrules (telle que ce qui est rencontré lorsque la feuille de style est accessible directement via le système de fichiers, plutôt que de servir via un serveur Web?
NVM, je viens de le comprendre. Ajoutez la ligne suivante juste au-dessus de '// extrayez les règles »:
Si (null == feuille || null == feuille.csrules) retour;
Vous cherchez quelque chose qui fonctionnera dans tous les navigateurs ou est-ce juste pour le développement?
Par "CLASSES CSS" Vous voulez dire "Tous les sélecteurs quelles que soient une mention d'une classe HTML", "Sélecteurs qui incluent des sélecteurs de classe", "Les bits de sélecteurs qui sont des sélecteurs de classe" ou autre chose?