如何根据媒体查询用文本替换按钮元素？答案

【问题标题】：How to replace a button element by its text, based on media query?如何根据媒体查询用文本替换按钮元素？
【发布时间】：2021-12-04 07:10:59
【问题描述】：

我只想删除 <button> 元素，但使用 JavaScript 将文本保留在 max-width: 768px 媒体查询中的按钮中。我知道它目前是 jQuery。我可以删除按钮，但无法使媒体查询条件正常工作。

这里是按钮，用 JavaScript 删除：

$(".rent").replaceWith(function() {
  return $(this).text();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="rent">Rent</button>

这是我尝试删除带有媒体查询条件的按钮，但它不起作用：

const mediaQuery = window.matchMedia('(max-width: 768px)');

if (mediaQuery.matches) {
  $(".rent").replaceWith(function() {
    return $(this).text();
  });
}

这里有一个更新，它可以与事件侦听器一起工作，但在调整大小时会中断。

function checkMediaQuery() {
  const mediaQuery = window.matchMedia('(max-width: 768px)');
  if (mediaQuery.matches) {
    $(".rent").replaceWith(function() {
      return $(this).text();
    });
  }
}
window.addEventListener('resize', checkMediaQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="rent">Rent</button>

【问题讨论】：

那么想要的结果到底是什么？文本与媒体查询有何关系？为什么下面的 sn-p “不起作用”？
当前按钮位于桌面导航栏上的菜单链接列表中。我想删除按钮元素并将按钮的文本保留在列表中，以便列表中的文本与移动视图中没有按钮的其他链接相匹配。我尝试过使用 CSS 的其他方法，但我认为这是最好的解决方案。
您有点重申了问题中已经存在的内容，但并没有完全解决我的观点。具体来说，与媒体查询有什么关系？应该如何、在何处以及何时应用媒体查询？我们怎么知道它在工作？请edit您的帖子并澄清这一点。也考虑一下我第一条评论中的问题。
媒体查询只是按钮元素将被删除并留下文本的触发器。我真的不知道如何解释或提供更多细节。我们怎么知道它在工作？当按钮被删除时，媒体查询中只剩下文本，我们知道它正在工作。文本与媒体查询的关系是文本保留，按钮不保留。
那你为什么不用css媒体查询改变样式而不是删除呢？

标签： javascript html jquery media-queries

【解决方案1】：

您的替换代码应该可以工作，这取决于您调用它的方式和时间。

尽管假设您仍然希望按钮执行任何操作，但您可以使用 css @media 规则将按钮设置为看起来像文本。

@media only screen and (max-width: 480px) {
  button.rent {
    background-color: transparent;
    border: none;
  }
}

&lt;button class="rent"&gt;RENT&lt;/button&gt;

【讨论】：