Finden Sie heraus, ob ein Bild eine Beschriftung mit Javascript hat

Viele verschiedene Websites haben Bildunterschriften auf Bildern in Absätzen, h1 Tags oder in einem div mit Bild zugeordnet.Finden Sie heraus, ob ein Bild eine Beschriftung mit Javascript hat

Ich möchte wissen, wie zu finden, wenn ein Bild eine Beschriftung zugeordnet ist mit Javascript speziell wenn die Beschriftung auf dem Bild platziert und Platz besetzt ist.

Die folgenden Beispiele unterscheiden sich, so gibt es einen einzigen Weg, um Untertitel zu finden oder nicht.

<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 > 
 
\t <head> 
 
\t \t <style type="text/css"> 
 
\t \t .imageHolder { 
 
\t \t  position: relative; 
 
\t \t  width: 285px; 
 
\t \t  height: 175px; 
 
\t \t } 
 
\t \t .imageHolder .caption { 
 
\t \t  position: absolute; 
 
\t \t  width: 283px; 
 
\t \t  height: 50px; 
 
\t \t  bottom: 0px; 
 
\t \t  left: 0px; 
 
\t \t  color: #ffffff; 
 
\t \t  background: green; 
 
\t \t  text-align: center; 
 
\t \t  font-weight: bold; 
 
\t \t  opacity: 0.7; 
 
\t \t } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="imageHolder"> 
 
\t \t \t <img src="http://images.all-free-download.com/images/wallpapers_large/small_island_wallpaper_beaches_nature_wallpaper_1388.jpg" alt="" /> 
 
\t \t \t <div class="caption"> 
 
\t \t \t \t <br>Caption goes here 
 
\t \t  </div> 
 
\t \t </div> 
 
\t </body> 
 
</html>

Quelle

2016-07-29 MiHawk

Sie den begrenzenden Client Rechteck von einem der Bilder verwenden könnten Elemente Geschwister, wenn zu sehen sie überlappen oder direkt neben dem Bild –

Aus dem zweiten Beispiel gibt es keine Möglichkeit zu erkennen, ob der Text eine Beschriftung sein soll oder nicht. – JJJ

@Juhana: Aber so ist es vor Ort http://www.firstpost.com/sports/india-vs-westindies-difference-in-fieldingmarks-gulf-between-both-teams-2919910.html . Erstes Bild – MiHawk

, wenn das Format ist immer so:

<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>

vielleicht so etwas wie folgt aus:

function myFunction() { 
    var x = document.getElementsByClassName("imageHolder"); 
    var c=x[0].childNodes; 
    return (c[3].className=="caption"); 
}

Quelle

2016-07-29 09:01:46 dadan

Für dieses Beispiel:

Also wenn Sie wissen, ho ist die Überschrift entwickelt, können Sie es einfach mit Eltern und Kindern DOM-Modell extrahieren.

//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 
}

Quelle

2016-07-29 08:59:25 TreantBG

Finden Sie heraus, ob ein Bild eine Beschriftung mit Javascript hat

Antwort

Verwandte Themen