ボディの幅が最大500pxの場合はボタンを追加したい

ブラウザのウィンドウのサイズを変更しようとすると、ボタンが数回表示されます、どうすれば修正できますか？ブラウザが500px以下にサイズ変更された場合は、 divが追加されている必要があります。また、幅が500pxを超える場合は、divを削除する必要があります。ここでJSファイルボディの幅が最大500pxの場合はボタンを追加したい

function sizer(){const mq = window.matchMedia("(max-width:500px)") 

if(mq.matches) 
{ 
let loginDiv= document.createElement('div'), 
    aTag = document.createElement('a'); 
    aTag.setAttribute('href','#'); 
    aTag.innerHTML="Login/Sign Up"; 
    loginDiv.className='login';// style in search.css 
    document.getElementsByClassName('drp')[0].appendChild(loginDiv); 
    loginDiv.appendChild(aTag); 

} 
else{ 
    document.getElementsByClassName("login").remove(); 
} 
}

はあなたが条件付きに基づく表示/非表示ボタンにメディアクエリ@media (max-width: 500px)を使用することができます

<body onresize="sizer()">

Picture of viewport

出典

2017-10-17 Paras Kumar

以下のようサイザーはbodyタグから呼び出される。ここで画面の幅。このようなユースケースには、Javascriptを使用する必要はありません。 JSのために

#myButton { 
 
    display:none; 
 
} 
 

 
@media (max-width: 500px) { 
 
    #myButton { 
 
    display:block; 
 
    } 
 
}

<button id="myButton"> 
 
Click me 
 
</button>

、あなたはこのような$(window).on("resize",...ハンドラを使用することができます：ウィンドウ幅に基づいてDOMに動的に要素を注入するため

$(window).on("resize", function() { 
 
    console.log("Resizing: ", window.innerWidth); 
 
    if(window.innerWidth < 500) { 
 
    $("#myButton").show(); 
 
    } else { 
 
    $("#myButton").hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="myButton"> 
 
Click me 
 
</button>

を：

$(window).on("resize", function() { 
 
    console.log("Resizing: ", window.innerWidth); 
 
    if(window.innerWidth < 500) { 
 
    if($("#myDiv > #myButton").length == 0) { 
 
     var button = document.createElement("button"); 
 
     button.innerText = "Click me"; 
 
     button.id = "myButton"; 
 
    
 
     $("#myDiv").append(button); 
 
    } 
 
    } else { 
 
    $("#myButton").remove(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="myDiv"> 
 
    Div. 
 
</div>

出典

2017-10-17 06:01:35 Nisarg

は、私はあなたが 'resize'イベントを使用することができる方法を示すために更新されただけ –

@ParasKumar私の答えをJavaScriptを使用して動的にボタンを追加します。要素を動的に挿入する場合は、 'document.createElement（" button "）'を使用して本文に追加することができます。 – Nisarg

要素をダイナミックに挿入する際の問題点は、このステートメントがtrue（ 'if（window.innerWidth <500）'）になるまでボタンを追加することです。 –

ボディの幅が最大500pxの場合はボタンを追加したい

答えて

関連する問題