desktop/mobile 按钮中的 link 仅与 css class 不同

Question

我有带 Elementor 的 WordPress 网站，我需要为移动版和桌面版设置不同的按钮 link。它是自定义组件，因此无法编辑 html 代码、添加 ID 或 CLASS（以供将来更新）。

html代码为：

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

是否可以将此 html 代码 link 转换为 javascript 以便 link 在移动版和桌面版中有所不同？

Answer 1

你可以试试检查window的innerWidth是否小于某个宽度，如果是，则更改href属性：

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>

Answer 2

使用方法 window.matchMedia()，它采用 媒体表达式 作为参数。

The Window interface's matchMedia() method returns a new MediaQueryList object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query.

let link = document.querySelector(".theme-btn.btn-style-four");

if (window.matchMedia("(max-width: 767px)").matches) {
    link.setAttribute("href", "http://link_mobile.cz/");
} else {
    link.setAttribute("href", "http://link.cz/");
}

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

desktop/mobile 按钮中的 link 仅与 css class 不同

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

html

javascript

wordpress

button

hyperlink