Comment récupérer les valeurs des propriétés CSS invalides/personnalisées en JavaScript ?

Accès aux valeurs des propriétés CSS invalides/personnalisées en JavaScript

Lors de la définition de propriétés CSS personnalisées ou invalides telles que "-my-foo", les développeurs peut se demander s'il est possible de récupérer leurs valeurs à partir de JavaScript.

Pour répondre à cette question, supposons que nous ayons CSS comme indiqué ci-dessous :

div {
    -my-foo: 42;
}

Tentative d'accès à la valeur de "-my -foo" depuis JavaScript via l'objet CSSStyleDeclaration peut entraîner des difficultés. Les tests effectués dans Chrome et Firefox montrent que ces navigateurs ignorent les propriétés non valides et n'exposent que les propriétés valides. Par exemple, avec du CSS comme :

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

l'objet CSSStyleDeclaration ne contiendra que les clés suivantes :

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

Par conséquent, obtenir la valeur de "-my-foo" à partir de JavaScript en utilisant cette méthode n'est pas réalisable.

Cependant, la spécification de style DOM-Level-2 indique qu'"une implémentation [navigateur] est censée fournir l'accès à toutes les propriétés spécifiées... via l'interface CSSStyleDeclaration." Cela suggère que les navigateurs devraient théoriquement répertorier les propriétés invalides dans l'objet, même s'ils ne les reconnaissent pas.

Pour contourner le problème, il est possible d'analyser le texte CSS brut pour récupérer la valeur de la propriété personnalisée. Cependant, cette approche n'est pas recommandée car elle implique des efforts importants et n'est pas toujours fiable ou efficace.

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!