使用javascript抓取文本并左对齐
我正在制作一个包含多行图像的网站，每个图像都应该是可点击的，并且左侧有标题。我在 HTML 中使用了内联 javascript（我知道这被轻视）和 onclick 事件。我有一个带有一些基本 JavaScript 的 js 文件。我正在使用 js 文件将图像中的 alt 标签添加到照片的左侧。我是初学者，从codepen和w3schools复制到代码。当我单击图像时，模式可以工作，但文本显示为“未定义”。
我需要弄清楚如何使用 javascript 在单击图像时显示 alt 标签文本。这适用于每张图像，而不仅仅是一张图像，因此 JavaScript 必须适用于每张照片。谢谢你！
<!-- IMG ROW 1 -->
<div>
<div class="nested">
<div>
<img src="IMAGES/c1.jpg" onclick="onClick(this)" class="modal-hover-opacity" alt="Smiley face" height="100">
</div>
<div>
<img src="IMAGES/IMG_c2.jpg" onclick="onClick(this)" class="modal-hover-opacity" alt="Smiley face" height="100">
</div>
<div>
<img src="IMAGES/IMG_c3.JPG" onclick="onClick(this)" class="modal-hover-opacity" alt="Smiley face" height="100">
</div>
<div>
<img src="IMAGES/IMG_c4.JPG" onclick="onClick(this)" class="modal-hover-opacity" alt="Smiley face" height="100">
</div>
<div>
<img src="IMAGES/IMG_c5.JPG" onclick="onClick(this)" class="modal-hover-opacity" alt="Smiley face" height="100">
</div>
<div>
<img src="IMAGES/IMG_c6.JPG" onclick="onClick(this)" class="modal-hover-opacity" alt="Smiley face" height="100">
</div>
<div>
<img src="IMAGES/IMG_c7.JPG" onclick="onClick(this)" class="modal-hover-opacity" alt="Smiley face" height="100">
</div>
</div>
</div>
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
transform: rotate(90deg);
height: 100%;
vertical-align: middle;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
var img = document.getElementById("img01");
var captionText = document.getElementById("caption");
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
captionText.innerHTML = this.alt;
}
HUX布斯3回答
-
尚方宝剑之说
用于element.alt获取 alt 属性。var img = document.getElementById("img01");var captionText = document.getElementById("caption");function onClick(element) { document.getElementById("img01").src = element.src; document.getElementById("modal01").style.display = "block"; captionText.innerHTML = element.alt;} -
牛魔王的故事
我写了一些代码，你可以尝试一下。希望对您有帮助。<!DOCTYPE html><html dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <img id="myImg" onclick="modalImg('img1','cap1')" data-toggle="modal" data-target="#myModal" src="https://mymodernmet.com/wp/wp-content/uploads/2019/03/elements-of-art-6.jpg" alt="Painting Is Wonderfull" style="width:20%"> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <table width="100%"> <tr> <td width="30%"> <p id="cap1" style="transform: rotate(90deg);"></p> </td> <td> <img id="img1" width="100%"> </td> </tr> </table> </div> </div> </div> </div> </body> <script type="text/javascript"> function modalImg(img, cap) { var caption = document.getElementById("myImg").alt; var src = document.getElementById("myImg").src; var imgModal = document.getElementById(img).src = src; var capModal = document.getElementById(cap).innerHTML = caption; } </script></html> -
临摹微笑
如果您有兴趣显示与替代文本不完全匹配的数据，这是您可以考虑的另一种方法。如果文本始终与替代文本匹配，则另一个答案更接近您当前的尝试。 <div> <img src="IMAGES/c1.jpg" onclick="showAlt(this)" class="modal-hover-opacity" alt="Smiley face" height="100" data-alt-text="Smiley face"> </div>function showAlt(pic) { var picText = pic.getAttribute("data-alt-text"); document.getElementById("img01").src = element.src; document.getElementById("modal01").style.display = "block"; captionText.innerHTML = picText;}
随时随地看视频慕课网APP
相关分类
Html5
