我有以下代码:
<!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>
点击 Hide Me 按钮后，我得到这个页面:
现在我想完全删除图片 block 并将 Display Me 按钮置于页面顶部。我该怎么做？
我只想使用纯 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();
}
}
关于javascript - 隐藏顶部图像后，如何将 `Hide Me` 按钮从底部带到网页顶部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45971680/