javascript - 获取图片的 alt 以显示

Question

大家好，我似乎无法让我的代码在此站点上运行。我唯一的问题是我有一个模态图片库，我想在放大图片时显示图片“alt”。我是 javascript 的新手，但我知道需要添加一些东西才能在图像变大时显示 alt。我只想让人们在打开图片时看到图片的来源。

Image of before clicking on image Image of modal gallery

如图片所示，我希望图片的 alt 显示在模式/灯箱下方

希望你能帮助我:)

问候 弗朗索瓦

< script >
  function onClick(element) {
    document.getElementById("img01").src = element.src;
    document.getElementById("modal01").style.display = "block";

  } < /script>

/* Style the Image Used to Trigger the Modal */

ImgHolder {
  display: flex;
  justify-content: center;
  width: 100%;
}
.myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  width: 110px;
  height: 115px;
  margin-right: 5px;
  margin-top: 5px;
}
.myImg:lastchild {
  margin-right: 0;
}
.myImg:hover {
  opacity: 0.7;
}
/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1600;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  padding-bottom: 20px;
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: scroll;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}
/* Modal Content (Image) */

.modal-content {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 700px;
  border-radius: 20px;
}
/* Add Animation - Zoom in the Modal */

.modal-content {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  -moz-animation-name: zoom;
  -moz-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
/* The Close Button */

.close {
  position: absolute;
  top: 50px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: #755378;
  text-decoration: none;
  cursor: pointer;
}

<div class="ImgHolder">
  <img src="../../Photoshop converted/Soweto/Cooling-Towers-Soweto.jpg" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
  <img src="../../DSC_01800001.JPG" onclick="onClick(this)" class="myImg myImgMobile" alt="eagle">
</div>

<div id="modal01" class="modal" onclick="this.style.display='none'">
  <span class="close">&times;</span>
  <img id="img01" class="modal-content">
</div>

Answer 1

请检查这个工作演示`

<a id="a">
    <img alt="hello world" class='myImg' src="http://placehold.it/150x150">
</a>

var $a = document.getElementById("a");
var $img = $a.getElementsByTagName("img")[0];
console.log($img.alt);

http://jsfiddle.net/xnkjn/ `