Question

onClick on按钮会弹出一个注册表。问题是，仅当屏幕尺寸为1440px以上时才需要这样做。

   <a href="#" class="button"onmousedown="viewForm()">start</a>

   function viewForm(){
        document.getElementById("form").style.display = "block";
    };

Answer 1

您可以使用window.resize事件。尝试调整窗口大小，您将看到另一个可见的元素。希望有帮助。

function reportWindowSize() {
  console.log(window.innerWidth)
  if (window.innerWidth >= 1440) {
    document.getElementById("a").style.display = "block"
    document.getElementById("form").style.display = "block";
  }
  // just for test my pc has small screen
  else if (window.innerWidth <= 500) {
    document.getElementById("b").style.display = "block"
  }
}

function viewForm() {
  document.getElementById("form").style.display = "block";
};

window.onresize = reportWindowSize;

<a href="#" id="a" class="button" onmousedown="viewForm()" style="display:none">start</a>

<a href="#" id="b" class="button" onmousedown="viewForm()" style="display:none">ENDIT</a>

<form id="form"><input type="text"></form>

Answer 2

您可以通过多种方式阅读窗口大小（在此处Device and Viewport Size In JavaScript

所以这样的事情应该起作用：

<a href="#" class="button"onmousedown="viewForm()">start</a>

function viewForm(){
    if (window.innerWidth >= 1440 ) {
        document.getElementById("form").style.display = "block";
    }
};

也许您并不需要所有这些，您可以仅使用CSS媒体查询隐藏链接，这完全取决于您要执行的操作。

Answer 3

没有jQuery：

function viewForm(){
  if (window.innerWidth >= 1440) {
    document.getElementById("form").style.display = "block";
  }
};

请注意，如果用户减小窗口的大小，即使在1440以下，窗体仍将保持可见。您可能还需要检查resize事件。

您可以通过以下方式更新上述功能：

function viewForm(){
  if (window.innerWidth > 1440) {
    document.getElementById("form").style.display = "block";
  } else {
    document.getElementById("form").style.display = "none";
  }
};

window.addEventListener('resize', viewForm);

基于屏幕尺寸的功能

3 个答案: