Les valeurs de propriété CSS ne peuvent pas récupérer les valeurs de propriétés CSS invalides?

Propriétés CSS personnalisées, indiquées par des noms préfixés avec un tiret, offrent un mécanisme pour définir et accéder à des styles uniques dans une application. Cependant, JavaScript peut-il accéder aux valeurs de ces propriétés personnalisées si elles sont invalides ou non reconnues par le navigateur?

Explication

L'objet CSSStyledEclaration expose les propriétés de style d'un élément en javascript. Lors de la rencontre d'un nom de propriété non valide, tel que "-my-Foo", cet objet saute généralement la propriété et procède avec d'autres propriétés valides.

La spécification de style DOM-Level-2 suggère que toutes les propriétés CSS dans un bloc de déclaration doivent être accessibles via l'interface CSSStyledEclaration, y compris les invites. Cependant, dans la pratique, les navigateurs comme Chrome et Firefox ne prennent pas en charge ce comportement.

Malgré le manque d'accès direct à JavaScript aux valeurs des propriétés CSS non valides, une approche alternative implique l'analyse du texte CSS brut. En extrayant les propriétés de style de l'élément de style correspondant, vous pouvez identifier et récupérer manuellement la valeur d'une propriété personnalisée, même si elle est invalide. document.getElementsByTagName ("style") [0] .InnerText; const PropertyName = "-my-Foo"; const Value = StyleText.match (new regexp (`\\ b $ {propriétéName}: \\ s * (.?) \\ b`," i ")) [1];

Remarque: Cette approche nécessite une expression régulière pour correspondre au nom de la propriété personnalisée et à l'extraction de sa valeur. Il est considéré comme une solution de bas niveau et peut ne pas être la méthode la plus efficace ou la plus appropriée pour tous les scénarios.