Как скрыть тело, но сохранить отображение изображения с помощью JavaScript - PullRequest
0 голосов
/ 17 мая 2019

У меня есть 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 Ответ

1 голос
/ 18 мая 2019

Попробуйте это:

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...