javascript - 带有文本替换的响应式 JavaScript

Question

我想根据屏幕尺寸 (max-width:700px) 替换文本。我想使用 JavaScript 来替换屏幕尺寸并使用 if/else。

这是我的代码:

.membre5 {
  display: inline-block;
  position: relative;
  top: 15px;
  margin: 0 auto;
  justify-content: space-between;
  max-width: 50vw;
  box-sizing: border-box;
  align-items: center;
  text-align: center;
  /* transform: translateX(50%); */
  padding-bottom: 150px;
}

.card {
  margin-left: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
  max-width: 300px;
  max-height: 540px;
  text-align: center;
  background-color: grey;
}

img.skin {
  max-width: 300px;
  max-height: auto;
}

.title {
  color: rgb(210, 210, 210);
  font-size: 18px;
}

.nom {
  font-size: 2.5vw;
  color: inherit;
  color: white;
}

button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

a {
  text-decoration: none;
}

button:hover,
a:hover {
  opacity: 0.7;
}

.card {
  font-family: odin rounded;
  font-size: 120%;
}

<div class="membre5">
  <div class="card">
    <img class="skin" src="https://cdn1.imggmi.com/uploads/2018/7/19/82b5f414cf833e05e6dd86cef344a52f-full.png" alt="ALLiAnce" style="width:100%">
    <h1 class="nom">ALLiAnce</h1>
    <p class="title" id="comp">Admin et remplaçant</p>
    <script>
      function myFunction(x) {
        if (x.matches) { // If media query matches
          function test() {
            var str = document.getElementById("comp").innerHTML;
            var res = str.replace("Admin et remplaçant", "Membre");
            document.getElementById("comp").innerHTML = res;
          }
        }
      }

      var x = window.matchMedia("(max-width: 700px)")
      myFunction(x) // Call listener function at run time
      x.addListener(myFunction) // Attach listener function on state changes
    </script>
    <p><button>Contact</button></p>
  </div>
</div>

所以我想更改的文本:"Admin et remplaçant" 到 "Membre"，但是脚本不起作用，我不知道为什么(我从许多网站上获取脚本并将其整合在一起)。你能说说哪里出了问题吗？

谢谢。

Answer 1

这会起作用。加载时，调用函数检查 max-width 并向 resize 事件添加监听器。如果宽度超过或小于 max-width，以下代码会更改文本。

使用 MediaQueryList 的监听器，MediaQueryList.addListener()

var mql = window.matchMedia("(max-width: 200px)");
function matches()
{
    var elem = document.getElementById("comp");
    elem.innerHTML = mql.matches ? "Membre" : "Admin et remplaçant";
}
mql.addListener(matches);

<p class="title" id="comp">Admin et remplaçant</p>

MediaQueryList.onchange

var mql = window.matchMedia("(max-width: 200px)");
function matches()
{
    var elem = document.getElementById("comp");
    elem.innerHTML = mql.matches ? "Membre" : "Admin et remplaçant";
}
mql.onchange = matches;

<p class="title" id="comp">Admin et remplaçant</p>

使用window.onresize,

function matches()
{
    var elem = document.getElementById("comp");
    elem.innerHTML = window.matchMedia("(max-width: 200px)").matches ? "Membre" : "Admin et remplaçant";
}
window.onresize = function(event) {
    matches();
};
matches();

<p class="title" id="comp">Admin et remplaçant</p>