如何使用Javascript查找图像上是否有标题
如何使用Javascript查找图像上是否有标题
提问于 2016-07-29 08:26:00
许多不同的站点在图片上都有标题，比如段落、h1标签，或者在带有图像的div中映射。
我想知道如何使用Javascript，特别是当标题放在图像上并占用空间时，使用Javascript来查找图像中是否有与其相关的标题。
下面的例子是不同的，所以是否有单一的方法可以找到标题。
<figure>
<img src="http://images.all-free-download.com/images/wallpapers_large/small_island_wallpaper_beaches_nature_wallpaper_1388.jpg" alt="Tea cup with steam and pen on bed">
<figcaption>Journaling with Tea</figcaption>
</figure>
<div class="image">
<img src="http://images.all-free-download.com/images/wallpapers_large/small_island_wallpaper_beaches_nature_wallpaper_1388.jpg" alt="Tea cup with steam and pen on bed">
<p>Journaling with Tea</p>
</div>
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.imageHolder {
position: relative;
width: 285px;
height: 175px;
}
.imageHolder .caption {
position: absolute;
width: 283px;
height: 50px;
bottom: 0px;
left: 0px;
color: #ffffff;
background: green;
text-align: center;
font-weight: bold;
opacity: 0.7;
}
</style>
</head>
<body>
<div class="imageHolder">
<img src="http://images.all-free-download.com/images/wallpapers_large/small_island_wallpaper_beaches_nature_wallpaper_1388.jpg" alt="" />
<div class="caption">
<br>Caption goes here
</div>
</div>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-07-29 09:01:46
如果格式总是这样：
<div class="imageHolder">
<img src="http://images.all-free-download.com/images/wallpapers_large/small_island_wallpaper_beaches_nature_wallpaper_1388.jpg" alt="" />
<div class="caption">
<br>Caption goes here
</div>
</div>也许是这样的：
function myFunction() {
var x = document.getElementsByClassName("imageHolder");
var c=x[0].childNodes;
return (c[3].className=="caption");
}Stack Overflow用户
发布于 2016-07-29 08:59:25
对于这个例子：
<div class="image" id="theImage"> <img
src="http://images.all-free-download.com/images/wallpapers_large/small_island_wallpaper_beaches_nature_wallpaper_1388.jpg"
alt="Tea cup with steam and pen on bed"> <p>Journaling with Tea</p>
</div>因此，如果您知道ho是设计的标题，您可以很容易地提取它的父母和孩子DOM模型。
//get the div/div's
var div = document.getElementById("theImage");
var children = div .children;
for (var i = 0; i < children.length; i++) {
var chield= children[i];
// Do stuff
// You can get if is image by className
// if is p then get innerTEXT
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38654017
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号