Comment déterminer le sélecteur CSS sur un objet DOM?

J'ai un élément tel que element = document.getElementyById ("myElement"); Maintenant, supposons qu'il y ait des CSS appliquées par diverses méthodes telles que #id, .class, et tagName.Comment déterminer le sélecteur CSS sur un objet DOM?

Nous savons que #id a la priorité sur .class et .class a la priorité sur tagName. Je veux déterminer laquelle de la méthode ci-dessus est appliquée sur cet élément, c'est-à-dire que je veux voir si CSS a été appliqué dessus en utilisant id, class, ou tag. Comment pourrais-je le découvrir? Y a-t-il une bibliothèque JavaScript disponible pour cela?

Source

2010-11-09 Obi-Wan Spock

Un élément peut avoir CSS appliqué en utilisant l'un quelconque de ces procédés ou un mélange de ceux-ci; le plus souvent, il a plusieurs styles, chaque style utilisant un mélange de règles. En tant que tel, c'est un problème très complexe, et pour sa complexité, il n'est pas très bien défini. Comme la question reste, la réponse pour la plupart des éléments sur un site Web moyen sera "tous les trois". Puis-je vous demander ce que vous voulez utiliser pour cela? – deceze

il y aura aussi des règles css héritées par les ancêtres .. vous devriez utiliser firebug qui montre tous les cas et en détail .. –

En fait, je développe quelque chose de similaire à Firebug et j'ai besoin du sélecteur CSS. Une fois que je le connaîtrai, je pourrai changer de CSS et utiliser ce sélecteur pour rendre cet élément dans le navigateur. –

Il a été demandé here et here et de nombreux autres endroits.

Source

2010-11-09 08:39:24 Ben

merci. relativement utile mais pas assez –

ces questions sont liées aux styles appliqués et non aux sélecteurs utilisés par élément. – marcelduran

Vous avez raison, et ce n'est pas vraiment une réponse informative, juste quelques liens. Je voudrais supprimer mais c'est déjà accepté :( – Ben

Pourquoi ne vous vérifiez

element = document.getElementyById("myElement"); 
if (element.tagName != "") { ... } 
if (element.id != "") { ... } 
if (element.className != "") { ... }

Source

2010-11-09 08:16:18 Simon

ok, vous n'auriez pas à vérifier l'id, cependant ... – Simon

Aller à travers l'objet document.styleSheets, itérer sur chaque objet styleSheet, chaque règle. Vous devrez ensuite analyser la propriété selectorText, en écrivant essentiellement votre propre analyseur CSS tout en conservant un tableau interne sur la spécificité de chaque sélecteur.

Comparez la spécificité de la règle actuelle avec les précédentes, puis déterminez quelle propriété remplace laquelle. Après tout cela, vous devrez toujours vérifier l'héritage - passez par chacun des parents de l'élément en question et recherchez les propriétés qui peuvent être héritées, et ajoutez-les à cette liste si elles ne sont pas déjà définies sur les enfants . Cela signifie également que vous devez gérer un ensemble de propriétés héritées.

Si vous n'avez pas réalisé, c'est tout à fait une entreprise. Pourquoi ne pas simplement utiliser les outils de développement disponibles pour votre navigateur et regarder les règles CSS fournies par ceux-ci.

Source

2010-11-09 08:32:49

qu'en est-il de window.getcomputedstyle (element)? –

@UmairP https://developer.mozilla.org/fr/DOM:window.getComputedStyle - "' getComputedStyle() 'donne le [final utilisé] (https://developer.mozilla.org/en/CSS/used_value) valeurs de toutes les propriétés CSS d'un élément. " –

Comment déterminer le sélecteur CSS sur un objet DOM?

Répondre

Questions connexes