JavaScript window.innerwidth无法正常工作_Javascript_Html

JavaScript window.innerwidth无法正常工作

javascript html

JavaScript window.innerwidth无法正常工作,javascript,html,Javascript,Html,我是JavaScript新手，想制作一个简单的“hello world”程序，根据屏幕宽度更改文本。如果窗口（索引文件）的宽度为400或更多像素，则显示文本；如果窗口较小，则400px显示其他文本。我不知道为什么我的代码不起作用。有人能给我解释一下吗，提前谢谢这是我的代码（HTML和JavaScript） HTML= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

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

这是我的代码（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>


JavascriptResponsive
你好，世界

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>");
}

var currentWidth=window.innerWidth；
如果（当前宽度>400）{
写（“你好，大世界”）；
}
否则如果（当前宽度<400）{
写（“你好，小世界”）；
}

运行JavaScript代码时，变量不会一直更新和运行。因此，您需要编写代码，以便在情况发生变化时进行检测。因此，您需要收听调整大小事件。因此，您可以绑定一个事件侦听器并重新运行代码。您也不能在页面加载后使用document.write输出消息，因为它将删除所有页面内容。所以您想要更新DOM

函数updateMessage（）{
var currentWidth=window.innerWidth；
var message=“你好，小世界”；
如果（当前宽度>400）{
message=“你好，大世界”；
}
document.getElementById（“msg”）.innerHTML=message
}
window.addEventListener（“加载”，更新消息）
window.addEventListener（“调整大小”，更新消息）

Hello world

什么不起作用？当我将屏幕调整到任何大小时，它都会显示“Hello big world”，这可能是因为您的代码没有监听任何屏幕更改事件。看看这样的东西，代码不会再运行了。这是一件一劳永逸的事。如果你想改变它，你需要监听调整大小，而不是使用document.write。但我在上面放了一个else语句，对吗？当屏幕大小小于400时，它应该更改屏幕大小。另一种方法是CSS媒体查询和显示属性。