Puis-je accéder à la valeur des propriétés CSS non valides / personnalisées à partir de JavaScript?

Supposons que j'ai le CSS suivant:

div { -my-foo: 42; } 

Est-ce que je peux plus tard en JavaScript connaître la valeur de la -my-foo CSS pour une div donnée?

Je ne pense pas que vous pouvez accéder à des noms de propriété non valides, du moins, cela ne fonctionne pas sur Chrome ou Firefox pour moi. CSSStyleDeclaration ignore simplement la propriété non valide. Pour le CSS donné:

 div { width: 100px; -my-foo: 25px; } 

style:CSSStyleDeclaration objet style:CSSStyleDeclaration contient uniquement les clés suivantes:

 0: width cssText: "width: 100px" length: 1 

Cependant, il est intéressant de constater ce que dit la spécification style DOM-Level-2 :

Bien qu'une implémentation ne reconnaisse peut-être pas toutes les propriétés CSS dans un bloc de déclaration CSS, il est prévu de fournir l'accès à toutes les propriétés spécifiées dans la feuille de style via l'interface CSSStyleDeclaration.

Ce qui implique que l'objet CSSStyleDeclaration devrait avoir répertorié la propriété -my-foo dans l'exemple ci-dessus. Peut-être y at-il un navigateur là-bas qui le supporte.

Le code que j'ai utilisé pour tester est le http://jsfiddle.net/q2nRJ/1/ .

Remarque : Vous pouvez toujours bricoler en analysant le texte brut. Par exemple:

 document.getElementsByTagName("style")[0].innerText 

Mais cela me semble beaucoup de travail, et je ne connais pas vos raisons pour faire cela, je ne peux pas dire si une meilleure alternative pour votre problème existe.

Propriétés personnalisées CSS

Style DOM 2

Comme l'a souligné Anurag, cela a été proposé dans DOM Level 2 et plus tard obsolète. Internet Explorer était le seul navigateur qui l'avait implémenté et ils ont cessé de le supporter dans Edge. IE s'attend à ce que la propriété ne commence pas avec un tiret, alors my-foo: 42; devrait marcher.

Style de variables CSS

Les navigateurs plus récents prennent en charge les variables CSS. Ceux-ci commencent par un double tiret: – --my-foo: 42; (Ils peuvent être réutilisés ailleurs comme cette font-size: var(--my-foo); )

Exemple

CSS

 div { --my-foo: 42; my-foo: 42; } 

JS

 // Chrome 49, Firefox 31, Safari 9.1 (future Edge): const cssVariable = bodyStyles.getPropertyValue('--my-foo') // IE: const cssCustomProperty = bodyStyles['my-foo'] 

Support du navigateur

Actuellement, Microsoft Edge est le seul navigateur sans support pour l'une de ces méthodes, mais l'écriture des variables CSS dans Edge est "en cours de développement" .