サイズ変更機能が動作しません

こんにちは私は本当に簡単なスクリプトに問題があります。ウィンドウ幅の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>

出典

2017-02-10 Anonymous

：

は、ここでは、コードです。 768px以上の場合は、クラス「サイド」、767px以下のクラス 'サイドバー'があります。だから問題はどこにあるの？

幅が768未満のページを開くと、スクリプトが正しく動作しません。イベントオンロードにも追加する必要があります

出典

2017-02-10 22:41:50

最後に – topheman

で 'change（）'を呼び出すか、 –

サイズ変更機能が動作しません

答えて

関連する問題