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

【问题标题】：Different link in button for desktop/mobile only with css class仅具有 css 类的桌面/移动按钮中的不同链接
【发布时间】：2023-03-20 22:54:02
【问题描述】：

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

【问题讨论】：

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

标签： javascript html wordpress button hyperlink

【解决方案1】：

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

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

&lt;a href="http://link.cz/" class="theme-btn btn-style-four"&gt;&lt;span class="txt"&gt;Rezervovat&lt;/span&gt;&lt;/a&gt;

【讨论】：

【解决方案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/");
}

&lt;a href="http://link.cz/" class="theme-btn btn-style-four"&gt;&lt;span class="txt"&gt;Rezervovat&lt;/span&gt;&lt;/a&gt;

【讨论】：