Question

当我调整浏览器的大小并刷新页面时，如果div宽度大于浏览器宽度，则div不会显示。如何使其不刷新页面。例如，当我调整浏览器大小时，如果div宽度大于浏览器宽度，它将自动显示而不刷新页面。

var body = document.querySelector('body');
var div = document.querySelector('div');

if (div.scrollWidth > body.clientWidth) {
  div.style.display = 'none';
}

body {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

div {
  width: 350px;
  height: 60px;
  background-color: lightgray;
}

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

谢谢。

Answer 1

这不是正确的方法，但是您可以收听resize事件以重新检查您的条件。

let body = document.querySelector('body');
var div = document.querySelector('div');

if (div.scrollWidth > body.clientWidth) {
  div.style.display = 'none';
}

window.addEventListener("resize", function() {
  if (div.scrollWidth > body.clientWidth) {
    div.style.display = 'none';
  }else div.style.display = '';
});

body {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

div {
  width: 350px;
  height: 60px;
  background-color: lightgray;
}

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

对于这种响应性条件，最好的方法是使用CSS媒体查询。您可以在这里找到更多信息：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

您为什么不使用CSS媒体规则？媒体规则可以在不同尺寸的屏幕上应用不同的样式。

例如：

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

docs，以获取有关@media规则的更多信息：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 3

您可以使用媒体查询来满足此要求。在CSS中包含以下代码。

@media only screen and (max-width: 600px) {
body {
    display: none;
}

}

如何在不刷新浏览器的情况下获取更改？

3 个答案: