时间戳

首页 > 解决方案 > JavaScript window.innerwidth 不能正常工作

javascript - JavaScript window.innerwidth 不能正常工作

问题描述

我是 JavaScript 新手，想制作一个简单的“hello world”程序，根据屏幕宽度更改文本。如果窗口（索引文件的）宽度为 400 像素或更多像素，则显示文本，如果窗口小于 400 像素，则显示其他文本。我不知道为什么我的代码不起作用。有人可以向我解释一下吗，在此先感谢

这是我的代码（HTML 和 JavaScript）

HTML =

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavascriptResponsive</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello world </h1>
<script src="Morris.js"></script>
</body>
</html>

JavaScript =

    var currentWidth = window.innerWidth;
if (currentWidth > 400) {
    document.write(" <h1>Hello big world </h1>");

}
else if (currentWidth < 400) {
    document.write( "<h1>Hello small world </h1>");
}

标签： javascripthtml

解决方案

当 JavaScript 代码运行时，变量不会不断更新和运行。因此，您需要编写代码来检测事情何时发生变化。所以你需要监听 resize 事件。所以你绑定一个事件监听器，你可以重新运行代码。您也不能使用 document.write 在页面加载后输出消息，因为它会删除所有页面内容。所以你想更新 DOM。

function updateMessage() {
  var currentWidth = window.innerWidth;
  var message = "Hello small world";
  if (currentWidth > 400) {
    message = "Hello big world";
  }
  document.getElementById("msg").innerHTML = message
}

window.addEventListener("load", updateMessage)
window.addEventListener("resize", updateMessage)
<h1 id="msg">Hello world </h1>

推荐阅读