Récupérer la liste des propriétés CSS

Question

Salut Existe-t-il un moyen de vérifier quelles propriétés CSS sont appliquées à un élément HTML. Je ne veux pas de plugin de navigateur. En utilisant javascript, je veux obtenir une liste de toutes les propriétés CSS définies sur un élément html. Si ce n'est pas possible, je peux toujours écrire 100 lignes de code et vérifier la valeur comme if ($ ("div"). Css ("background-color"). Longueur> 0) {}, pour chaque propriété css.

Answer 1

Comme mentionné, je aussi vous recommandons d'utiliser des outils d'inspection tels que Firebug, Webkit Inspector et Dragonfly.

Mais si vous avez besoin d'une vérification rapide des propriétés CSS, vous pouvez créer un script rapide. Certaines méthodes et propriétés DOM deviennent maniables, comme element.currentStyle et element.getComputedStyle().

Check this out http://blog.stchur.com/2006/06/21/css-computed-style/

Vive.

Answer 2

Vous devrez peut-être être un peu plus élaboré. Mais pour l'instant Firebug semble correspondre à votre description.

Answer 3

En fonction de votre navigateur, vous pouvez utiliser les plug-ins ou outils suivants (liés le cas échéant):

• Firefox-Firebug (télécharger le addon, redémarrez et appuyez sur F12 pour ouvrir)
• Google Chrome, Safari - Webkit inspecteur (CTRL + MAJ + I pour la mettre)
• Opera - Dragonfly (CTRL + MAJ + I)
• Internet Explorer 5.5-7-IE Developer Toolbar (appuyez sur l'icône près de la barre d'adresse)
• Internet Explorer 8+ - IE Developer Tools (appuyez sur F12 pour ouvrir)

Answer 4

En utilisant javascript:

Object.keys(document.getElementsByTagName('HTML')[0].style).join(',') 

Cette instruction énumère toutes les propriétés CSS:

Pour vérifier si une propriété css est appliquée: Utilisez la fonction suivante:

String.prototype.isCssProp=function(hTMLElement){ 
    if(hTMLElement instanceof HTMLElement){ 
     var all=','+Object.keys(hTMLElement.style).join(',')+','; 
      if(all.indexOf(','+this+',')===-1){ 
       return false; 
      }else{ 
       return true 
      } 
    }else{ 
     return false; 
    } 

} 

Et Ensuite, utilisez-le:

var hTMLELement=document.getElementById('myid'); 
"color".isCssProp(hTMLELement); 
"background-color".isCssProp(hTMLELement);