javascript - 仅具有 css 类的桌面/移动按钮中的不同链接

Question

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

html代码是：

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

是否可以将此html代码链接到javascript，以便移动版和桌面版中的链接不同？

Answer 1

您可以尝试检查窗口的 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

使用 method window.matchMedia()，它将媒体表达式作为参数。

Window 接口的matchMedia()方法返回一个新的MediaQueryList对象，然后可以使用该对象确定文档是否与媒体查询字符串匹配，以及监视文档以检测它何时匹配（或停止匹配）该媒体查询。

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>