Как скрыть тело, но сохранить отображение изображения с помощью JavaScript

У меня есть HTML-страница, на которой я хочу спрятать все в теле, но по-прежнему отображать только одно изображение на странице. Затем я хочу скрыть то изображение, которое показывалось, а затем снова включить тело.

Я хочу сделать это с помощью JavaScript, который я вставляю на страницу. То есть, когда страница запускается, я могу запустить JavaScript, который я добавляю для этого. Мой JavaScript может вставить изображение. Затем мне понадобится добавить немного JavaScript, который отключит изображение и снова покажет тег 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

Всего 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> 


Есть идеи?

10000