Pouvons-nous accéder aux valeurs des propriétés CSS personnalisées ou invalides en JavaScript ?

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

Dans le domaine du développement Web, les propriétés CSS sont essentielles pour le style des éléments. Bien que de nombreuses propriétés CSS standard soient définies, vous pouvez rencontrer des scénarios dans lesquels vous souhaitez utiliser vos propres propriétés personnalisées. Cela soulève la question : pouvons-nous accéder aux valeurs de ces propriétés CSS invalides ou personnalisées en JavaScript ?

Pour explorer cela, considérons le CSS suivant :

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

En supposant que vous ayez un tel style déclaration, pouvez-vous récupérer la valeur de la propriété -my-foo en utilisant JavaScript pour un élément div donné ?

Méthodes conventionnelles

Malheureusement, accéder directement aux valeurs des éléments invalides Les propriétés CSS ne sont pas possibles par des moyens conventionnels. Les navigateurs ont tendance à ignorer les propriétés non reconnues ou personnalisées, vous ne les trouverez donc pas répertoriées dans l'objet CSSStyleDeclaration. Par exemple, dans l'exemple CSS donné, l'objet style:CSSStyleDeclaration ne contiendra que la propriété width.

Alternative possible

Bien que les méthodes conventionnelles puissent ne pas fonctionner, il existe une approche alternative. Vous pouvez analyser manuellement le texte CSS brut pour récupérer les valeurs des propriétés personnalisées. Par exemple, vous pouvez utiliser le code suivant :

<code class="javascript">document.getElementsByTagName("style")[0].innerText;</code>

Ce code récupère l'intégralité du texte CSS brut et vous permet de rechercher la valeur de la propriété personnalisée qui vous intéresse. Gardez à l'esprit que cette méthode nécessite des traitement et peut ne pas convenir à tous les scénarios.

Remarque :

Il convient de noter que l'interface CSSStyleDeclaration, telle que définie par la spécification de style DOM-Level-2 , implique que toutes les propriétés spécifiées, y compris celles non valides, doivent être accessibles via l'interface. Cependant, la plupart des navigateurs n'adhèrent pas actuellement à cette partie de la spécification.

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!