gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 06:13:44 26 4
gpt4 key购买 nike

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

我想使用注入(inject)到页面中的 JavaScript 来执行此操作。也就是说,当页面启动时,我可以运行我注入(inject)的一些 JavaScript 来执行此操作。我的 JavaScript 可以注入(inject)图像。然后,我需要能够稍后注入(inject)一些 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

最佳答案

试试这个:

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 - 如何使用 JavaScript 隐藏正文但保持图像显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56193236/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com