时间戳

首页 > 解决方案 > 如何使用 JavaScript 媒体查询更改元素的类？

javascript - 如何使用 JavaScript 媒体查询更改元素的类？

问题描述

我试图用 Bootstrap 的图像创建描述，如果屏幕宽度为 500 像素，我想更改图像的类以使其居中（它最初位于屏幕的左侧）。这是我的代码

const mediaQuery = window.matchMedia('(min-width: 768px)')
var toonImg = document.getElementById('toonImg');

function img(e) {
  if (e.matches) {
    toonImg.className("rounded mx-auto d-block")
  }
}


mediaQuery.addListener(img)
img(mediaQuery)
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <link rel="stylesheet" href="main.css">
  <title>Seasons</title>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-primary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">CartoonPalace</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link active" aria-current="page" href="/">Home</a>
          <a class="nav-link" href="#">Pokemon</a>
          <a class="nav-link" href="#">P&F</a>

        </div>
      </div>
    </div>
  </nav>

  <section class="cartoon-description container">
    <div class="card mb-3 bg-primary" style="max-width: 700;">
      <div class="row g-0">
        <div class="col-md-4">
          <img id="toonImg" src="pokemon.jpg" class="" style="width:185px; margin:0; padding:0;" alt="...">
        </div>
        <div class="col-md-8">
          <div class="card-body" style="color: #14161a">
            <h5 class="card-title">Pokemon</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>

          </div>
        </div>
      </div>
    </div>
  </section>


  <script src="script.js">
  </script>
</body>

</html>

我以为我执行了错误的媒体查询，但是当我尝试在宽度匹配时控制台日志时，它工作得很好。我在这里犯了什么错误？

标签： javascripthtml

解决方案

在这里我修好了。你必须使用.classList.add方法。并在函数中传递正确的论点img使其工作。

  const mediaQuery = window.matchMedia('(min-width: 768px)')
var toonImg = document.getElementById('toonImg');
function img(mediaQuery){
    if(mediaQuery.matches){
        toonImg.classList.add("rounded", "mx-auto", "d-block");
        console.log('triggered!');;
    }
}


mediaQuery.addListener(img);
img(mediaQuery);

推荐阅读