使用JavaScript根据屏幕大小更改链接指向的位置

Question

我正在使用Bootstrap4框架创建一个移动第一站点。我正在尝试创建一个JavaScript函数，它将在

<div class="col-md">
    <div id="accordion" class="form-group text-dark mt-3">
        <!-- Cold Card -->
        <div class="card">
            <!-- Cold Temps -->
            <!-- Temps include Make line temps, Refrigerator temps, 
                 Freezer temps, and Beffet temps -->
            <div class="card-header">
                <a class="card-link" 
                   data-toggle="collapse" 
                   data-parent="#accordion" 
                   href="#cold" 
                   id="coldlink">
                    <h3>Cold Temps Management</h3>
                </a>
            </div>

            <!-- Cold Card -->
            <div class="collapse" id="cold">

我一直在尝试几种不同的JavaScript函数，下面是我最近使用的一组函数：

const mq = window.matchMedia( "(min-width: 767px)");

if(mq.matches) {
    document.getElementById("coldlink").href = "#cold";
} else {
    document.getElementById("coldlink").href = "cold.php";
}

根据我在许多不同网站上读到的内容，当屏幕大小为767px或更大时，此代码应将元素“coldlink”的href属性更改为“#cold”，当屏幕大小小于767px时，此代码应更改为“cold.php”。然而，当我运行这段代码（在整个页面中）并使用开发人员工具检查页面时，我会收到一条错误消息，说“TypeError:document.getElementById（…）为null”

我在其他几个函数中使用了.getElementById（…）方法，但没有收到相同的错误消息，因此我不知道这次哪里出错了。

如果有一种方法可以使用Bootstrap更改href属性，我非常愿意尝试一下，因为我还没有发现如何做到这一点




Answer 1

您可以执行点击事件，而不是在屏幕上显示hrefhttps://www.w3schools.com/jsref/event_onclick.asp

在onclick函数中，您可以

const mq = window.matchMedia( "(min-width: 767px)");

if (mq.matches) {
    window.location.href = "#cold";
} else {
    window.location.href = "cold.php";
}

Answer 2

添加窗口onload，为了让你的DOM在页面中完全加载，比你可以得到你的锚元素并改变它的href，如果你想用javascript做DOM操作，你最好确保它们都先加载。

window.onload = function () {
            const mq = window.matchMedia("(min-width: 400px)").matches
            if (mq) {
                console.log('More')
                document.getElementById("coldlink").href = "#cold";
            } else {
                console.log('Less')
                document.getElementById("coldlink").href = "cold.php";
            }
        }