Javascript 在顶部显示的图像被隐藏后，如何将“隐藏我”按钮从底部带到网页顶部？_Javascript

Javascript 在顶部显示的图像被隐藏后，如何将“隐藏我”按钮从底部带到网页顶部？

javascript

Javascript 在顶部显示的图像被隐藏后，如何将“隐藏我”按钮从底部带到网页顶部？,javascript,Javascript,我有以下代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> function myEvent(){ if(document.getElementById('demo2').innerHTML=="Hid

我有以下代码：

<!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>


文件
函数myEvent（）{
if（document.getElementById（'demo2'）.innerHTML==“隐藏我”）{
document.getElementById（'demo1'）.src='none'；
document.getElementById（'demo2'）.innerHTML='Display Me'；
}
否则{
document.getElementById（'demo1'）.src=“deepika.jpg”；
document.getElementById（'demo2'）.innerHTML=“隐藏我”；
changeCSS（）；
}
}
函数changeCSS（）{
document.getElementById（'demo1'）.style.height=“500”；
document.getElementById（'demo1'）.style.width=“400”；
}


把我藏起来

单击

隐藏我

按钮后，我将获得此页面：

现在我想完全删除图片块，并将

显示我

按钮置于页面顶部。我怎样才能做到

我只想使用纯JavaScript，不想使用JQuery。如果我正确理解了这个问题，您希望在单击按钮时切换图像的显示。您可以使用以下更新的myEvent函数：

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

单击“隐藏我”按钮后，将

#demo1

的样式设置为

显示：无谢谢，它可以工作。我通过编写style.display='block'稍微修改了您的代码