当我调整浏览器大小并刷新页面时，如果 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>谢谢。
最佳答案
这不是正确的方法，但您可以监听调整大小事件来重新检查您的条件。
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
关于javascript - 如何在不刷新浏览器的情况下获取更改？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52096501/