JavaScript peut-il accéder aux valeurs des propriétés CSS invalides ?

JavaScript peut-il récupérer des valeurs de propriété CSS non valides ?

Les propriétés CSS personnalisées, désignées par des noms préfixés par 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 de un élément en JavaScript. Lorsqu'il rencontre un nom de propriété non valide, tel que "-my-foo", cet objet ignore généralement la propriété et passe à d'autres propriétés valides.

La spécification de style DOM-Level-2 suggère que toutes les propriétés CSS au sein d'un Le bloc de déclaration doit être accessible via l'interface CSSStyleDeclaration, y compris celles non valides. Cependant, dans la pratique, les navigateurs comme Chrome et Firefox ne prennent pas en charge ce comportement.

Malgré l'absence d'accès JavaScript direct aux valeurs des propriétés CSS non valides, une approche alternative consiste à analyser le 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 n'est pas valide.

Exemple de code

Le le code suivant montre comment analyser le texte CSS brut et récupérer la valeur de la propriété "-my-foo" :

const styleText = document.getElementsByTagName("style")[0].innerText;
const propertyName = "-my-foo";

const value = styleText.match(new RegExp(`\b${propertyName}:\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 extrayez sa valeur. Elle est considérée comme une solution de bas niveau et n'est peut-être pas la méthode la plus efficace ou la plus appropriée pour tous les scénarios.

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!