Fatal编程技术网
  • javascript/
  • 如何使用JavaScript隐藏主体但保持图像显示

如何使用JavaScript隐藏主体但保持图像显示

javascript jquery css dom

如何使用JavaScript隐藏主体但保持图像显示,javascript,jquery,css,dom,Javascript,Jquery,Css,Dom,我有一个HTML页面，我想隐藏正文中的所有内容，但仍然只在页面上显示一个图像。然后，我想隐藏显示的图像，然后重新启用主体 我想用注入页面的JavaScript实现这一点。也就是说，当页面启动时，我可以运行一些我注入的JavaScript来实现这一点。我的JavaScript可以注入图像。然后，我需要能够在以后注入一些JavaScript来关闭图像并重新显示body标记 我可以很容易地将body标签设置为hidden，但这也会隐藏我附加到body的img标签，这违背了我的目的 我的页面是这样的：

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

我想用注入页面的JavaScript实现这一点。也就是说，当页面启动时，我可以运行一些我注入的JavaScript来实现这一点。我的JavaScript可以注入图像。然后，我需要能够在以后注入一些JavaScript来关闭图像并重新显示body标记

我可以很容易地将body标签设置为hidden，但这也会隐藏我附加到body的img标签，这违背了我的目的

我的页面是这样的：

<html>
<body style="display:inline">
   <p>...</p>
<body>
</html>
试试这个：

让newDiv=document.createElement（“DIV”）；
newDiv.setAttribute（“id”、“hide”）；
文件.body.appendChild（newDiv）；
document.getElementById（“隐藏”）.style.zIndex=“9”；
document.getElementById（“隐藏”）.style.width=“100%”；
document.getElementById（“隐藏”）.style.height=“100%”；
document.getElementById（“隐藏”）.style.backgroundImage=“url（'https://www.nasa.gov/sites/default/files/styles/full_width_feature/public/thumbnails/image/p5020056.jpg')";
document.getElementById（“隐藏”）.style.backgroundRepeat=“无重复”；
document.getElementById（“hide”）.style.backgroundSize=“cover”；
document.getElementById（“隐藏”）.style.top=“0”；
document.getElementById（“隐藏”）.style.position=“固定”；
document.body.style.margin=“0”；
document.body.style.padding=“0”

这是图像下的文本，不会显示，因为图像覆盖了身体的整个区域

我甚至可以复制粘贴这数百次，但图像仍将是最重要的

这是图像下的文本，不会显示，因为图像覆盖了身体的整个区域

我甚至可以复制粘贴这数百次，但图像仍将是最重要的

这是图像下的文本，不会显示，因为图像覆盖了身体的整个区域

我甚至可以复制粘贴这数百次，但图像仍将是最重要的

这是图像下的文本，不会显示，因为图像覆盖了身体的整个区域

我甚至可以复制粘贴这数百次，但图像仍将是最重要的

这是图像下的文本，不会显示，因为图像覆盖了身体的整个区域

我甚至可以复制粘贴这数百次，但图像仍将是最重要的

这是图像下的文本，不会显示，因为图像覆盖了身体的整个区域

我甚至可以复制粘贴这数百次，但图像仍将是最重要的

这是图像下的文本，不会显示，因为图像覆盖了身体的整个区域

我甚至可以复制粘贴这数百次，但图像仍将是最重要的

这是图像下的文本，不会显示，因为图像覆盖了身体的整个区域


我甚至可以复制粘贴这数百次，但图像仍将是最重要的
 
一种方法是使用2个
div
元素，一个用于图像，另一个用于“身体”。不幸的是，我无法控制身体中的内容。我所能做的就是注入Javascript根据您所说的“隐藏”主体的意思，您可以注入一个带有纯色背景的
div
，并使用
z-index
，以确保它位于其他所有内容之上。然后将您的图像包含在该
div
.Hmm中。谢谢你，杰卡。听起来它有潜力。一个div会是什么样子，涵盖了一切？

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