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>

Answer 2

似乎在您向我声明测试函数后就没有调用它

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;
        }
        //CALL TEST FUNCTION
        test();
    } 
}

带有文本替换功能的自适应JavaScript

2 个答案: