Question

我有一个HTML页面，我希望将所有内容隐藏在正文中，但仍只在页面上显示单个图像。然后，我想隐藏显示的图像，然后重新启用身体。

我想用注入页面的JavaScript来做到这一点。也就是说，当页面启动时，我可以运行一些注入的JavaScript来执行此操作。我的JavaScript可以注入图像。然后，我需要稍后能够注入一些JavaScript，以关闭图像并重新显示body标签。

我可以轻松地将body标签设置为隐藏，但是这也隐藏了我附加到body上的img标签，这违背了我的意图。

我的页面是这样的：

<html>
<body style="display:inline">
   <p>...</p>
<body>
</html>

我的隐藏图像问题代码是这个。

document.getElementsByTagName("body")[0].style.display = "hidden";
console.log("about to create image");
n = document.createElement("img"); // create an image element
n.src =
  "https://www.nasa.gov/sites/default/files/styles/full_width_feature/public/thumbnails/image/p5020056.jpg"; // relative path to the image
document.body.appendChild(n); // append the image to the body

Answer 1

尝试一下：

let newDiv = document.createElement("DIV");
newDiv.setAttribute("id", "hide");
document.body.appendChild(newDiv);
document.getElementById("hide").style.zIndex = "9";
document.getElementById("hide").style.width = "100%";
document.getElementById("hide").style.height = "100%";
document.getElementById("hide").style.backgroundImage = "url('https://www.nasa.gov/sites/default/files/styles/full_width_feature/public/thumbnails/image/p5020056.jpg')";
document.getElementById("hide").style.backgroundRepeat = "no-repeat";
document.getElementById("hide").style.backgroundSize = "cover";
document.getElementById("hide").style.top = "0";
document.getElementById("hide").style.position = "fixed";
document.body.style.margin = "0";
document.body.style.padding = "0";

<p>This is a text under the image and will not show up because the image is covering the whole area of the body !</p>
<p> I can even copy and paste this hundreds of times, but the image will still be on top of everything !</p>
<p>This is a text under the image and will not show up because the image is covering the whole area of the body !</p>
<p> I can even copy and paste this hundreds of times, but the image will still be on top of everything !</p>
<p>This is a text under the image and will not show up because the image is covering the whole area of the body !</p>
<p> I can even copy and paste this hundreds of times, but the image will still be on top of everything !</p>
<p>This is a text under the image and will not show up because the image is covering the whole area of the body !</p>
<p> I can even copy and paste this hundreds of times, but the image will still be on top of everything !</p>
<p>This is a text under the image and will not show up because the image is covering the whole area of the body !</p>
<p> I can even copy and paste this hundreds of times, but the image will still be on top of everything !</p>
<p>This is a text under the image and will not show up because the image is covering the whole area of the body !</p>
<p> I can even copy and paste this hundreds of times, but the image will still be on top of everything !</p>
<p>This is a text under the image and will not show up because the image is covering the whole area of the body !</p>
<p> I can even copy and paste this hundreds of times, but the image will still be on top of everything !</p>
<p>This is a text under the image and will not show up because the image is covering the whole area of the body !</p>
<p> I can even copy and paste this hundreds of times, but the image will still be on top of everything !</p>

如何隐藏正文但如何使用JavaScript保持图像显示

1 个答案: