Question

您好我的脚本非常简单。如果窗口宽度低于768像素，它应该改变类，但它不起作用。我不知道为什么。在这种情况下，我不想在此使用媒体查询。

此处的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ez</title>
    <style>
    .aside {
        float: left; 
        height: 1000px; 
        width: 250px; 
        background-color: grey;
        }
    .sidebar {
        position: absolute;
        top: 0;
        left: -250px;
        }
    </style>
</head>
<body style="height: 2000px">

<aside class="aside" id="aside"></aside>
<main style="float: left; height: 1000px; width: 70%; background-color: black;"></main>        

<script>
var elm = document.getElementById("aside");    

function change() {
    var w = window.innerWidth;
    if(w<768) {
        elm.className = "sidebar";
    } else {
        elm.className = "aside";
    }
}


window.addEventListener("resize", change);
</script>
</body>
</html>

Answer 1

我开始了你的剧本。对于768px以及更多，对于767px和更少的类'侧边栏'，有“搁置”等级。那问题出在哪里？

如果您打开宽度小于768的页面，则脚本将无法正常工作。你必须将它添加到事件onload

调整大小的功能不起作用

1 个答案: