Não é possível encontrar um elemento via JavaScript que existe

[darkpixlz (Pyx)]

Olá,

Tentei criar um script para obter o atributo background-image do cabeçalho do perfil e, em seguida, salvá-lo como uma variável raiz. No entanto, meu código não funciona. Tentei muitas soluções, algumas delas incluíam IA, que apenas reverteram a versão do plugin e não ajudaram.

Este é o código:

<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; // quando executado, isso sempre aparece, não importa o quê, e exibe o mesmo erro
        }

    };

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

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

    document.addEventListener('DOMContentLoaded', init);

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

Obrigado.

[awesomerobot (Kris)]

Seu script está carregando antes que a maior parte da página seja renderizada, por isso não consegue encontrar o elemento…

Isso deve fornecer o que você está procurando…

<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>

Presumo que você esteja tentando reutilizar o plano de fundo do perfil do usuário na página de perfil em algum lugar? caso contrário, isso não permanecerá se você sair de um perfil e atualizar a página…

[darkpixlz (Pyx)]

Isso funcionou! Parece que o CSS não funcionou.

[awesomerobot (Kris)]

Ah, certo, o que você vai querer fazer é adicionar a parte url() ao valor da propriedade personalizada… algo como:

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