Hello, I tried making a script to grab the background-image attribute from the profile header, then save it as a root variable. However, my code does not work. I tried many solutions, some of them included AI, which just reverted the plugin version and did not help. This is the code: 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; //when run, this always comes up no matter what and displays the same error } }; const shouldRun = () => { return window.location.pathname.startsWith('/u/'); }; const init = () => { if (shouldRun()) { setRootBgImage(); } }; document.addEventListener('DOMContentLoaded', init); api.onPageChange(() => { init(); }); Thank you.

Ah right, what you’ll want to do is add the url() part to the custom property value… so something like: document.documentElement.style.setProperty('--profile-bg-img', `url(${userBg})`);

Your script is loading before most of the page is rendered, so it can’t find the element… This should get you what you’re looking for… 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'); } } }); I assume you’re trying to reuse the user’s profile background on the profile page somewhere? otherwise this won’t stick around if you navigate away from a profile and refresh the page…

That worked! Seems like ths css doesn’t though. [image]

Cannot find an element via JavaScript which does exist

Development

darkpixlz (Pyx ) March 6, 2023, 10:10pm 3

That worked! Seems like ths css doesn’t though.

Topic		Replies	Views
Javascript added to theme header returns $ is not defined Development	4	216	June 24, 2025
Executing js after DOM loaded Product Support	6	3830	November 30, 2018
User card backgrounds don't serve from CDN domain Bug	4	1390	January 29, 2015
[newbie] Trouble adding script to dynamically change CSS values based on conditions Product Support	9	1838	October 11, 2016
Possible style sheet / javascript interation bug Bug	3	1017	March 4, 2015

Cannot find an element via JavaScript which does exist

Related topics