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

Posted 2023-03-25

【中文标题】仅具有 css 类的桌面/移动按钮中的不同链接

【英文标题】：Different link in button for desktop/mobile only with css class

【发布时间】：2021-09-03 11:00:37

【问题描述】：

我有带有 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，以便移动版和桌面版中的链接不同？

【问题讨论】：

请接受对您有帮助的已解决答案。

【参考方案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>

【参考方案2】：

使用方法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>