JavaScript peut-il accéder à la valeur des propriétés CSS personnalisées non valides ?

Accès aux propriétés CSS personnalisées non valides à partir de JavaScript

En CSS, les propriétés personnalisées peuvent être définies à l'aide du préfixe --. Cependant, pouvez-vous accéder à la valeur des propriétés CSS invalides ou personnalisées à partir de JavaScript ?

Question :

Étant donné le CSS suivant :

<code class="css">div {
    -my-foo: 42;
}</code>

Pouvez-vous plus tard, en JavaScript, déterminer la valeur de la propriété -my-foo pour un élément div particulier ?

Réponse :

L'accès aux noms de propriétés non valides dans CSSStyleDeclaration ne fonctionne pas semblent être pris en charge dans les navigateurs populaires comme Chrome et Firefox. Pour le CSS donné, l'objet CSSStyleDeclaration contient uniquement la largeur de propriété valide et ignore -my-foo.

Fait intéressant, la spécification de style DOM-Level-2 indique que toutes les propriétés spécifiées doivent être disponibles via l'interface CSSStyleDeclaration. Il se peut qu'un navigateur prenne en charge ce comportement.

Approche DIY :

En guise de solution de contournement, vous pouvez analyser le texte CSS brut à l'aide de document.getElementsByTagName("style" )[0].texteintérieur. Cependant, cela peut être une approche lourde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!