如何创建和显示div

Question

我正在尝试创建一个照片厨房，我已经在列表和缩略图中添加了图片点击我想显示模糊背景的大图像并显示在中心。我能够创建一个动态div并显示大图像，但它始终位于列表下方。 请在以下地址找到我的代码：https://github.com/sanjana-1604/BirthDay-.git

请检查我的代码并让我知道如何正确获取div

Answer 1

好的，我下载了你的代码并且已经查看了它。虽然您应该共享一个片段。

我非常感谢您为编程所做的努力。

function changeBackgroundColor(image, image_src, color) {
  if (image === 'no') {
    document.body.style.background = "red";
  } else {
    document.body.style.backgroundImage = "url('Img/bg.png')";
  }
}
var imageCount = 01;
total = 20;

function slide(x) {

  var image = document.getElementsByClassName('image');
  imageCount = imageCount + x;
  if (imageCount > total) {
    imageCount = 01;
  }
  if (imageCount < 1) {
    imageCount = total;
  }
  image.src = "Img/big_pics" + imageCount + ".jpg";
}

/////////////////////////////////////////////////////
/////////Code Written by me starts here//////////////
/////////////////////////////////////////////////////


window.addEventListener("load", function() { //The code inside this block must be executed only after the complete page is loaded,
  var createBackgroundFader = function(imgNumber) {
    var fader = document.createElement("div");
    fader.classList.add("fader", "hidden");
    fader.id = "bigImageViewer" + imgNumber;

    fader.addEventListener("click", function(event) { //This block of code will enable you to click on the empty space of fader to hide it
      if (event.target === this) {
        this.classList.toggle("hidden");
      }
    });

    return fader;
  };
  var createBigImageViewer = function(imgNumber) {
    var img = document.createElement("img");
    var fader = createBackgroundFader(imgNumber);

    img.classList.add("bigImg");
    img.src = "Img/big_pics/" + imgNumber + ".jpg";

    fader.appendChild(img);

    return fader;
  };
  var createListItem = function(imgNumber) { //In javascript you can create functions like this as well...
    var li = document.createElement("li");
    var img = document.createElement("img");

    //Preparing img element
    img.setAttribute("src", "Img/Thumbnail/" + imgNumber + ".jpg");
    img.setAttribute("alt", "thumbnail image");
    img.dataset.imgNumber = imgNumber;
    img.classList.add("image", "thumbnail");
    img.addEventListener("click", function() {
      var bigImageViewer = document.getElementById("bigImageViewer" + this.dataset.imgNumber);
      bigImageViewer.classList.toggle("hidden"); //Look up dictionary to know the meaning of toggle...
    });

    //Appending img element to li
    li.appendChild(img);

    //Lastly return li
    return li;
  };


  var photoList = document.getElementById("photoList");
  for (var i = 0; i < 20; i++) {
    photoList.appendChild(createListItem(i + 1)); //Appending the freshly cooked li element to photoList
    document.body.appendChild(createBigImageViewer(i + 1)); //Appending bigImageViewer to body but you can't see because they are hidden by default. Click on a thumbnail to view the BigImage
  }
});

/////////////////////////////////////////////////////
///////////Code Written by me ends here//////////////
/////////////////////////////////////////////////////

article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  font-size: 100%;
}
/*title "1 year june"*/

.title_h1 {
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 1.5em;
  background: white;
  width: auto;
  text-align: center;
  border-radius: 0.2em;
  /*to make border rounded*/
  display: inline;
  position: absolute;
  top: 5%;
  left: 10%;
}
/*   ---------------------------------------------------------------------------------------------------  */

/*main menu */

.main_menu
/*main menu*/

{
  list-style-type: none;
  /* to avoid bullets in the list items */
  display: inline;
  position: absolute;
  top: 5%;
  left: 20%;
}
.main_menu li {
  display: inline;
  /* to display horizontally */
}
/* --------------------------------------------------------------------------------------------------------------*/

/* main white div */

.main_div
/*class to draw main div*/

{
  position: absolute;
  /*positioned relative to body*/
  top: 18%;
  left: 15%;
  width: 65%;
  background: white;
  padding: 5px;
}
/* --------------------------------------------------------------------------------------------------------------*/

#welcome_note {
  border: 2px solid rgb(0, 0, 0);
  border-radius: 0.2em;
  width: 15em;
  height: 16em;
  background: white;
  padding: 2px;
  display: inline-block;
  margin: 5px;
}
#welcome_note h3 {
  text-align: center;
}
.mainpage_header {
  height: 15em;
  background: #ff8566;
  position: relative;
  /*positioned relative to main div*/
  top: 20px;
  left: 10px;
  width: 80%;
}
#DP_img {
  border: 2px solid black;
  width: 10em;
  height: 10em;
}
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/

/*  PHOTO PAGE */

/* --------------------------------------------------------------------------------------------------------------*/

.Photo_main_div {
  position: absolute;
  /*positioned relative to body*/
  top: 18%;
  left: 15%;
  width: 80%;
  background: white;
  padding: 5px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}
/* --------------------------------------------------------------------------------------------------------------*/

#photo_page_outline {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  border: 1px dashed black;
  border-radius: 10px;
}
/* --------------------------------------------------------------------------------------------------------------*/

#photo_page_header {
  width: 100%;
  text-align: center;
  background: rgb(251, 130, 184);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
/* --------------------------------------------------------------------------------------------------------------*/

#photo_page_footer {
  width: 100%;
  text-align: center;
  background: rgb(251, 130, 184);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  clear: both;
}
/* --------------------------------------------------------------------------------------------------------------*/

#content {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* --------------------------------------------------------------------------------------------------------------*/

#content ul {
  list-style: none;
}
/* --------------------------------------------------------------------------------------------------------------*/

#content li {
  width: 14em;
  float: left;
}
#content img {
  -webkit-webkit-transition: all 1s ease;
  -moz-webkit-transition: all 1s ease;
  -ms-webkit-transition: all 1s ease;
  -o-webkit-transition: all 1s ease;
  transition: all 1s ease;
  filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -ms-filter: blur(3px);
  -o-filter: blur(3px);
  border: 1px solid #000000;
}
#content img:hover {
  -webkit-webkit-transition: all 1s ease;
  -moz-webkit-transition: all 1s ease;
  -ms-webkit-transition: all 1s ease;
  -o-webkit-transition: all 1s ease;
  transition: all 1s ease;
  filter: blur(0px);
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  -o-filter: blur(0px);
  transform: translateZ(25px) rotate(3deg);
  border: 1px solid #000000;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
}
/*/////////////////////////////////////////////////////
/////////Code Written by me starts here////////////////
/////////////////////////////////////////////////////*/

li .thumbnail {
  height: 120px;
  width: 200px;
}
.fader {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
  text-align: center;
  padding-top: 100px;
}
div .bigImg {
  max-width: 70%;
  max-height: 70%;
  border: solid white 8px;
  box-sizing: border-box;
  box-shadow: 10px 30px 50px 0px;
}
.hidden {
  visibility: hidden;
}
/*/////////////////////////////////////////////////////
///////////Code Written by me ends here////////////////
/////////////////////////////////////////////////////*/

<!-- No Changes were made in this file except commenting all li elements.

li elements can easily be added to the ul through javascript from inside a loop

Kindly see from line number 80 in javascript to understand the logic.

-->

<!DOCTYPE html>
<html>

<head>
  <script src="myJavaScript.js"></script>
  <link rel="stylesheet" type="text/css" href="myCSS.css">

</head>

<body onload="changeBackgroundColor('yes')">
  <h1 class="title_h1">
            1 year June
        </h1>

  <ul class="main_menu">
    <li><a href="Photos.html">Photos</a>
    </li>
    <li>Stroy</li>
  </ul>

  <div class=" Photo_main_div">

    <div id="photo_page_outline">
      <div id="content">
        <header id="photo_page_header">
          PHOTOS
        </header>
        <ul id="photoList">
          <!--                        <li onclick="slide(1)"><img src="Img/Thumbnail/1.jpg" width="200" height = "120" alt="thumbnail image" class = "image"></li>
                        <li><img src="Img\Thumbnail\2.jpg" width="200" height = "120" alt="thumbnail image" onClick="slide(2)" class = "image"></li>
                        <li><img src="Img\Thumbnail\3.jpg" width="200" height = "120" alt="thumbnail image" onclick="slide(3)"></li>
                        <li><img src="Img\Thumbnail\4.jpg" width="200" height = "120" alt="thumbnail image" onclick="slide(4)"></li>
                        <li><img src="Img\Thumbnail\5.jpg" width="200" height = "120" alt="thumbnail image"></li>
                        <li><img src="Img\Thumbnail\6.jpg" width="200" height = "120" alt="thumbnail image"></li>
                        <li><img src="Img\Thumbnail\7.jpg" width="200" height = "120" alt="thumbnail image"></li>
                        <li><img src="Img\Thumbnail\8.jpg" width="200" height = "120" alt="thumbnail image"></li>
                        <li><img src="Img\Thumbnail\9.jpg" width="200" height = "120" alt="thumbnail image"></li>
                        <li><img src="Img\Thumbnail\10.jpg" width="200" height = "120" alt="thumbnail image"></li>
                        <li><img src="Img\Thumbnail\11.jpg" width="200" height = "120" alt="thumbnail image"></li>
                        <li><img src="Img\Thumbnail\12.jpg" width="200" height = "120" alt="thumbnail image"></li>
                        <li><img src="Img\Thumbnail\13.jpg" width="200" height = "120" alt="thumbnail image"></li>
                        <li><img src="Img\Thumbnail\14.jpg" width="200" height = "120" alt="thumbnail image"></li>
                        <li><img src="Img\Thumbnail\15.jpg" width="200" height = "120" alt="thumbnail image"></li>
                        <li><img src="Img\Thumbnail\16.jpg" width="200" height = "120" alt="thumbnail image"></li>
                        <li><img src="Img\Thumbnail\17.jpg" width="200" height = "120" alt="thumbnail image"></li>
                        <li><img src="Img\Thumbnail\18.jpg" width="200" height = "120" alt="thumbnail image"></li>
                        <li><img src="Img\Thumbnail\19.jpg" width="200" height = "120" alt="thumbnail image"></li>
                        <li><img src="Img\Thumbnail\20.jpg" width="200" height = "120" alt="thumbnail image"></li>-->

        </ul>
        <footer id="photo_page_footer">
          My Album
        </footer>
      </div>
    </div>
  </div>
</body>

</html>

或者，您可以从此链接https://www.dropbox.com/s/eqqktw9y8u97zsf/BirthDay--master.zip?dl=1

下载已解决的项目

我希望这可以解决你的问题。

注意：在你的big_pics文件夹中，请将文件名从01.jpg更改为09.jpg到1.jpg到9.jpg

参考文献： 在MDN（Mozilla开发者网络）上阅读以下内容，以便更好地了解您的问题是如何解决的......

1. 'this'关键字
2. 面向对象的Javascript
3. DOM
4. document.createElement()