如何使用JavaScript在特定屏幕宽度下隐藏和显示指定文本

推荐优先使用CSS实现该需求，相比JS控制更稳定高效，无需额外监听视口变化，修改步骤如下：

1. 修改HTML部分，将"Color mode"文本用带类名的span标签包裹，避免修改文本时覆盖图标元素：

<div class="night-mode">
    <a href="#"><i class="far fa-moon"></i><span class="color-mode-text">Color mode</span></a>
</div>

2. 在CSS中新增媒体查询规则即可实现需求：

@media (max-width: 980px) {
  .color-mode-text {
    display: none;
  }
}

如果你坚持要通过JS实现，需要修复原逻辑的两个核心问题：

• 直接修改<a>标签的innerText会覆盖内部的<i>图标元素，导致切换后图标消失
• matchMedia的change事件仅在视口宽度跨过指定阈值时触发，页面初次加载时不会执行判断，初始状态不符合预期

修改后的JS代码如下：

let darkMode = document.querySelector("header div.night-mode");
const hamburger = document.querySelector("header nav div.hamburger");
const navMenu = document.querySelector("header nav ul");
// 只需要监听一个媒体查询即可
const mq = window.matchMedia("(max-width:980px)");
const colorModeText = document.querySelector(".color-mode-text");

function mobileMenu() {
    hamburger.classList.toggle("active");
    navMenu.classList.toggle("active");
}
hamburger.addEventListener("click", mobileMenu);
darkMode.addEventListener("click", () => {
    let body = document.body;
    body.classList.toggle("dark-mode");
    document.querySelector("header div.night-mode a i").classList.toggle("fa-sun");
    document.querySelector("header div.night-mode a").classList.toggle("dark-mode-color");
    document.querySelector("header h1 a").classList.toggle("dark-mode-color");
});
// 切换文本显示的逻辑
function toggleText(e) {
  colorModeText.style.display = e.matches ? "none" : "inline";
}
// 页面加载时先执行一次判断当前宽度的状态
toggleText(mq);
// 监听宽度变化执行切换
mq.addEventListener("change", toggleText);

注意使用JS方案也需要先完成第一步HTML的调整，给文本包裹带类名的span标签。

内容的提问来源于stack exchange，提问作者ABHIJITH EA