Impossible de trouver un élément via JavaScript qui existe

Bonjour,

J’ai essayé de créer un script pour récupérer l’attribut background-image de l’en-tête du profil, puis de le sauvegarder comme variable racine. Cependant, mon code ne fonctionne pas. J’ai essayé de nombreuses solutions, dont certaines incluaient l’IA, qui ont simplement annulé la version du plugin et n’ont pas aidé.

Voici le code :

<script type="text/discourse-plugin" version="0.9">
    const setRootBgImage = () => {
        try {
            const el = document.getElementByClassName('.user-profile-image');
            if (el) {
                const bgImage = window.getComputedStyle(el).getPropertyValue('background-image');
                document.documentElement.style.setProperty('--profile-bg-img', bgImage);
            }
        } catch (error) {
            console.error(error);
            debugger; // quand il s'exécute, cela apparaît toujours, peu importe quoi, et affiche la même erreur
        }

    };

    const shouldRun = () => {
        return window.location.pathname.startsWith('/u/');
    };

    const init = () => {
        if (shouldRun()) {
            setRootBgImage();
        }
    };

    document.addEventListener('DOMContentLoaded', init);

    api.onPageChange(() => {
        init();
    });
</script>

Merci.

Votre script se charge avant que la majeure partie de la page ne soit rendue, il ne peut donc pas trouver l’élément…

Cela devrait vous donner ce que vous cherchez…

<script type="text/discourse-plugin" version="0.9">
api.onPageChange(() => {
  let currentRouteParent = api.container.lookup("router:main").currentRoute?.parent;
    if (currentRouteParent.name.includes("user")) {
        let userBg = currentRouteParent.attributes.profile_background_upload_url;

        if (userBg) {
            document.documentElement.style.setProperty('--profile-bg-img', userBg);
        } else {
            document.documentElement.style.removeProperty('--profile-bg-img');
      }
    }
});
</script>

Je suppose que vous essayez de réutiliser l’arrière-plan du profil de l’utilisateur sur la page de profil quelque part ? sinon, cela ne restera pas si vous quittez un profil et actualisez la page…

Ça a fonctionné ! Il semble que le CSS ne fonctionne pas cependant.

Ah, d’accord, ce que vous voudrez faire, c’est ajouter la partie url() à la valeur de la propriété personnalisée… donc quelque chose comme :

document.documentElement.style.setProperty('--profile-bg-img', `url(${userBg})`);

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.