2010-11-02 15 views
2

J'ai besoin d'une fonction javascript qui permet d'obtenir toutes les classes CSS appliquées à un élément.Est-il possible d'obtenir toutes les classes global/inherit css appliquées à un élément?

Nous avons des fonctions comme getComputedStyle (element, "") et currentStyle(), FF et IE respectivement. Mais, ces fonctions ne me donnent que les propriétés CSS appliquées à l'élément, pas les classes.

Pour rendre les choses plus claires, veuillez consulter la structure DOM suivante.

<html> 
<head> 
<style> 
.dd{ 
    font-weight:bold; 
} 
.dd span{ 
    border:solid 1px #ABABAB; 
} 
</style> 
</head> 
<body> 
    <div class='dd'> 
    <span id='span1'>Hi this is a example</span> 
    </div> 
</body> 
</html> 

Maintenant ce que le javascript est si je doit obtenir l'élément « span1 » il devrait me donner toutes les classes qui sont appliquées à cet élément. Dire que la sortie doit être me donner « la durée .dd et .DD »

Répondre

0
document.getElementById('span1').className; 

et vous pouvez utiliser .parentNode pour obtenir différentes classes parent.

Et, si vous donnez le parent le plus élevé un style position, vous pouvez utiliser ceci:

var topmost = document.getElementById('span1').offsetParent; 

for(var x = 0; x < topmost.childNodes.length;x++) { 
    alert(topmost.childNodes[x].className); 
} 

// Modifier

On dirait que vous essayez de faire un type de Firebug de chose. Beaucoup d'utilisateurs ici sur SO ont essayé la même chose. Une bonne recherche peut vous mener à des choses dont vous n'avez jamais rêvé ... muhahahaha ....

+0

Steve, i est en fait de trouver une construction en fonction qui me renvoie une liste de calsses. J'ai cherché sur le net et n'ai rien trouvé. – hirenhcm

0

En continuation de la réponse de Steve, vous pouvez simplement faire une boucle sur les nœuds parents et répertorier les noms de classes pour chaque nœud parent.

var listClasses = function(element){ 
    while(element){ 
     console.log(element.className); 
     element = element.parentNode; 
    } 
} 

à utiliser:

listClasses(target);