トップに表示されているイメージを隠すようにした後、「Hide Me」ボタンをWebページの一番上に表示する方法は？

私は次のコードを持っている：私は、このページを取得するHide Meボタンをクリックした後トップに表示されているイメージを隠すようにした後、「Hide Me」ボタンをWebページの一番上に表示する方法は？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 

    <script> 
     function myEvent(){ 
      if(document.getElementById('demo2').innerHTML=="Hide Me"){ 
       document.getElementById('demo1').src='none'; 
       document.getElementById('demo2').innerHTML='Display Me'; 
      } 
      else { 
       document.getElementById('demo1').src="deepika.jpg"; 
       document.getElementById('demo2').innerHTML="Hide Me"; 
       changeCSS(); 
      } 
     } 

     function changeCSS(){ 
      document.getElementById('demo1').style.height="500"; 
      document.getElementById('demo1').style.width="400"; 
     } 
    </script> 

</head> 
<body> 
    <img src="deepika.jpg" id="demo1" height="500" width="400"><br> 
    <button type="button" id="demo2" onclick=myEvent()>Hide Me</button> 

</body> 
</html>

を：

今、私は完全に画像ブロックを削除してのトップにDisplay Meのボタンを持って帰りたいと思いますページ。どうすればいいですか？

私は、プレーンJavaScriptを使用したい

なしjQueryの

出典

2017-08-31 Sonevol

：あなたは、以下の更新myEvent機能を使用することができますなし; ' – KKK

私が正しく質問を理解している場合は、ボタンクリック時に画像の表示を切り替えたいです。あなたは、私を隠すボタンをクリックしたディスプレイ `に＃のdemo1``のスタイルを設定した後

function myEvent(){ 
    if(document.getElementById('demo2').innerHTML=="Hide Me"){ 
     document.getElementById('demo1').src='none'; 
     document.getElementById('demo1').style.display = "none"; 
     document.getElementById('demo2').innerHTML='Display Me'; 
    } 
    else { 
     document.getElementById('demo1').style.display = ""; 
     document.getElementById('demo1').src="deepika.jpg"; 
     document.getElementById('demo2').innerHTML="Hide Me"; 
     changeCSS(); 
    } 
}

出典

2017-08-31 01:01:09

おかげで、それが動作します。 'style.display = 'block';と書いてコードを少し変更しました。 – Sonevol

トップに表示されているイメージを隠すようにした後、「Hide Me」ボタンをWebページの一番上に表示する方法は？

答えて

関連する問題