Different link in button for desktop/mobile only with css class

i have WordPress site with Elementor and i need set in button different link for mobile and desktop version. It´s custom component, so there is not possible edit html code, add ID or CLASS (for future updates).

html code is:

<a href="http://link.cz/" class="theme-btn btn-style-four"><span class="txt">Rezervovat</span></a>

is it possible to link this html code to javascript so that the links are different in the mobile and desktop version?

Answer

You could try checking whether the window’s innerWidth is smaller than a certain width, and if it is, change the href attribute:

document.querySelector('a').href = window.innerWidth <= 480 ? "https://mobilelink.com" : "https://desktoplink.com";

<a href="http://link.cz/" class="theme-btn btn-style-four"><span class="txt">Rezervovat</span></a>