Je veux obtenir un élément dans le DOM, puis rechercher les règles de mon fichier CSS contribuant à son apparence. Semblable à ce que le firebug ou le webkits inspecteur fait. Existe-t-il un moyen de le faire dans JavaScript?
Mise à jour: Je devrais fournir une contrainte et un exemple spécifique - Je ne suis que intéressé à la réalisation de ce navigateur dans des navigateurs Webkit Donc, les difficultés de navigation croisée ne sont pas tant de problème. Ce que je tente spécifiquement d'atteindre, c'est cela. Disons que j'ai une feuille de style comme suit: et disons du code HTML comme celui-ci: Comment compliqué est-il pour inverser les sélecteurs de requête sachant Nous n'avons besoin que de vous inquiéter de WebKit par opposition à tous les navigateurs?
5 Réponses :
est-ce possible? Absolument ... est-ce simple (surtout le navigateur croisé avec IE dans le mélange), pas tellement. Si vous êtes vraiment intéressé à faire cela, Découvrez la source Firebug Lite CSS ici . Au moins, les méthodes sont décemment commentées montrant quelles informations chacune se produisent.
.... ou si vous souhaitez simplement inspecter un navigateur qui n'a pas d'inspecteur, Utilisez simplement Firebug Lite .
Merci Nick, je ne suis vraiment intéressé que pour cela dans WebKit. J'aurais dû être plus précis mais je suis maintenant content de l'avoir laissé un peu large!
Il existe un moyen fiable de l'obtenir, mentionné dans ce blog post : Si vous utilisez Firefox et Firebug, vous pouvez essayer d'exécuter ce code dans Stackoverflow, pour voir ce que vous obtenez: P> et avec IE et FireBug Lite, vous pouvez faire: P> document.getElementById("custom-header").currentStyle
Merci mais je pense que cela lève un style calculé de la CSS. Donc, ce code m'aiderait à trouver la taille de la police est de 10px ;. Je ne pense pas que cela soit nécessairement destiné à trouver les sélecteurs spécifiques de la CSS, c'est-il?
Ce code vous aiderait à trouver les règles CSS appliquées à un élément. Peu importe où ils sont originaires, mais le fait qu'ils soient appliqués.
C'est ce que je cherchais. getcomputedSyle faire ce que getmatchedcsrules ne peut pas faire, car lorsqu'il y a des styles crosomaines
Je pense que c'est la solution pour cette question: Stackoverflow.com/questions/27957680
C'est ce que vous voulez. Webkit seulement. J'ai découvert à propos de GetMatchedCssrules en regardant la source d'inspecteur Web du chrome.
function getAppliedSelectors(node) {
var selectors = [];
var rules = node.ownerDocument.defaultView.getMatchedCSSRules(node, '');
var i = rules.length;
while (i--) {
selectors.push(rules[i].selectorText);
}
return selectors;
}
Impressionnant! C'est exactement ce que je cherchais.
Remarque Ceci fonctionne uniquement pour les règles dans les feuilles de style envoyées à partir du même serveur que le HTML. C'est par conception
@Jake c'est pourquoi je reçois null
Qu'est-ce que vous passez en tant que nœud?
@Anthony un nœud du DOM.
Notez que GetMatchedCssrules est uniquement prise en charge sur WebKit / Chrome et non FF / IE. Bit c'est ce que tu voulais, de toute façon.
GetMatchedCssrules sera supprimé dans chrome 63 développeurs.google.com / Web / mises à jour / 2017/10 / ...
Eh bien, c'est un vieil sujet. Bon pour webkit pour offrir une solution. Comme suggéré, j'ai regardé dans Firebug-Lite et ... surprise !! Pour chaque noeud, il boucle sur chaque règle de chaque feuille de style vérifiant si le sélecteur correspond à nos nœuds ou non.
Une solution de navigateur croiseur J'ai eu un bon succès avec est http: // www.brothercuke.com/site/resources/scripts/cssutilities/
Il est très puissant et précis, dérive beaucoup plus d'informations que la fonction WebKit uniquement mentionnée ci-dessus, et cela fonctionne sur tous les styles (y compris ceux qui sont inter-sites et qui ne sont pas actifs ou ont été modifiés).
Je devrais mentionner que je ne suis intéressé que pour le faire dans WebKit. Pas tant de navigateur croisé.
Dupliqué possible de Trouver toutes les règles CSS qui s'appliquent à un élément