Javascript Girl
  1. Javascript Girl
  3. Obtenir un style de style d'élément dans JavaScript
Intereting Posts
Google Closure lient / résolvent les problèmes avec ce mot-clé Comment puis-je ajouter "X-Content-Type-Options: nosniff" à tous les en-têtes de réponses de mon serveur Web Jquery: événement pour lequel le contenu chargé ajax est chargé (y compris les images) Avec GraphQL, quel est le bénéfice ou la nécessité de déclarer un modèle de support "classe" qui ne varie pas du type "Graphique" de manière évidente? Comment ouvrir un lien dans le navigateur Chrome, même si le navigateur d'ordinateur par défaut est «Safari»? Intercepter l'événement de sortie de la page Comment précharger (cache) une page externe dans jquery avant de la rediriger? Javascript regex capture plusieurs fois Routage de requêtes HTTP via Node.js Open pdf using phone gap Node.js async.series est ce que c'est censé fonctionner? Webpack-dev-server compile les fichiers, mais ne se rafraîchit pas ou ne rend disponible le javascript compilé pour le navigateur JQuery: vérifiez si l'élément est en flux normal Problème d'ajout de javascript étrange Liste des sorties + possibilité de réorganiser chaque élément en saisissant le rang #

Obtenir un style de style d'élément dans JavaScript

J'ai utilisé la fonction getStyle John Resig à partir des techniques JavaScript Pro pour obtenir le style des éléments: 

 function getStyle(elem, name) { // J/S Pro Techniques p136 if (elem.style[name]) { return elem.style[name]; } else if (elem.currentStyle) { return elem.currentStyle[name]; } else if (document.defaultView && document.defaultView.getComputedStyle) { name = name.replace(/([AZ])/g, "-$1"); name = name.toLowerCase(); s = document.defaultView.getComputedStyle(elem, ""); return s && s.getPropertyValue(name); } else { return null; } }

Cependant, cette méthode renvoie les styles par défaut pour un élément si aucun style n'est spécifié:

Http://johnboxall.github.com/test/getStyle.html

Alt text http://img.skitch.com/20081227-8qhxie51py21yxuq7scy32635a.png

Est-il possible d'obtenir uniquement les styles spécifiés de la feuille de style d'un élément (et de renvoyer le null si le style n'est pas défini)?

Mettre à jour:

Pourquoi ai-je besoin d'une telle bête? Je crée un petit composant qui permet aux utilisateurs de créer des éléments de style. L'un des styles qui peuvent être appliqués est l' text-align – left , center , à right – Utiliser les éléments getStyle GetStyle par défaut. Cela rend impossible de déterminer si l'élément est centré parce que l'utilisateur souhaitait qu'il soit centralisé ou centré parce que c'est le style par défaut.

Est-il possible d'obtenir uniquement les styles spécifiés de la feuille de style d'un élément (et de renvoyer le null si le style n'est pas défini)?

C'est effectivement ce qui est fait par la routine que vous présentez. Le problème est que, dans la plupart des scénarios, la plupart des styles ne sont pas définis – ils sont hérités et / ou définis par la feuille de style interne du navigateur individuel.

Vous pouvez, avec beaucoup d'efforts, annuler toutes les règles définissant le style en question, dans toutes les feuilles de style de la vue actuelle du document, les évaluer pour l'élément en question et s'il n'y a pas d'application … Et si aucun ne s'applique à un parent (ou ce style particulier n'est pas hérité) … alors considérez qu'il est indéfini. Cela serait lent et incroyablement propice aux erreurs. Je ne recommanderais pas l'essayer.

Peut-être que vous feriez mieux de reculer et de demander pourquoi vous auriez déjà besoin d'une telle chose?

Peut-être que votre composant peut envelopper les styles qu'il contrôle? Ensuite, lorsqu'un style est défini via le composant, le composant sait ce que l'utilisateur souhaite.