如何获取img alt标签并在图像下方显示为html？

时间：2015-10-14 21:28:22

标签： javascript html css image alt

我正在尝试从幻灯片上的每个图片中获取img alt标记，并将其用作幻灯片下方显示的标题。

使用javascript和css有没有简单的方法呢？

提前谢谢！

以下是该网站的链接：http://www.alison-jackson.co.uk

这是我写的HTML： 

<div id="galleryWrapper">

  <div id="slideshowWrapper">
    <div id="slideshow">
      {.repeated section items}
        {.if clickthroughUrl}<a href="{clickthroughUrl}" {.or}<div {.end}class="slide" data-slide-id="{id}" data-slide-url="{urlId}">
        <img {@|image-meta} />
        {.if clickthroughUrl}</a>{.or}</div>{.end}
      {.end}
    </div>
    <div class="gallery-controls">
      <span class="gallery-prev"><span>Prev</span></span><span class="gallery-divider"></span><span class="gallery-next"><span>Next</span></span>
    </div>
  </div>



  <!-- <div id="simpleControls">
      <span class="wrapper"><span class="control prev-slide">prev</span> / <span class="control next-slide">next</span></span>
  </div> -->



</div>

以下是输出的HTML： 

<div id="galleryWrapper">

  <div id="slideshowWrapper">
    <div id="slideshow" class="sqs-gallery-design-stacked">

      <div data-slide-url="xhpxqx84l4s2dz1sxvz24un4h9bt5h" data-slide-id="544d38fbe4b0dd27d7036a64" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_199" data-type="image" style="opacity: 0; z-index: 888;">
        <img data-image-focal-point="0.5,0.5" data-image-dimensions="552x666" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fbe4b0dd27d7036a64/1444823277877/03-OBAMA_SMOKING_XMAS_231012_HiRes-1024x682.jpg"
        data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fbe4b0dd27d7036a64/1444823277877/03-OBAMA_SMOKING_XMAS_231012_HiRes-1024x682.jpg" class="slide-photo" style="font-size: 0px; top: 0px; left: 387px; width: 662px; height: 798px; position: relative;"
        alt="Obama Smoking 2012. C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fbe4b0dd27d7036a64/1444823277877/03-OBAMA_SMOKING_XMAS_231012_HiRes-1024x682.jpg?format=1500w" data-image-resolution="1500w">
      </div>

      <div data-slide-url="wte8thrzcfhfe00unh2q75vtzj7n0i" data-slide-id="544d38fce4b0dd27d7036a66" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_201" data-type="image" style="opacity: 0; z-index: 888;">
        <img data-image-focal-point="0.5,0.5" data-image-dimensions="1024x690" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fce4b0dd27d7036a66/1444826067827/04-2002_Marilyn_wank_window_bars-1024x690.jpg"
        data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fce4b0dd27d7036a66/1444826067827/04-2002_Marilyn_wank_window_bars-1024x690.jpg" class="slide-photo" style="font-size: 0px; top: 0px; left: 126px; width: 1185px; height: 798px; position: relative;"
        alt="Marilyn Reclining C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fce4b0dd27d7036a66/1444826067827/04-2002_Marilyn_wank_window_bars-1024x690.jpg?format=2500w" data-image-resolution="2500w">
      </div>

      <div data-slide-url="fl83poim6cqov9t6i4qpg30jp7galt" data-slide-id="544d38fee4b0dd27d7036a70" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_203" data-type="image" style="opacity: 0; z-index: 888;">
        <img data-image-focal-point="0.5,0.5" data-image-dimensions="682x1024" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fee4b0dd27d7036a70/1444821495137/05-2824_001-Queen-on-looHR-682x1024.jpg"
        data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fee4b0dd27d7036a70/1444821495137/05-2824_001-Queen-on-looHR-682x1024.jpg" class="slide-photo" style="font-size: 0px; top: 0px; left: 452px; width: 532px; height: 798px; position: relative;"
        alt="Queen on the Loo C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fee4b0dd27d7036a70/1444821495137/05-2824_001-Queen-on-looHR-682x1024.jpg?format=1500w" data-image-resolution="1500w">
      </div>

      <div data-slide-url="2zrbx5dnwpzuczi0vx7ewgeqa7nhbn" data-slide-id="544d38fee4b0dd27d7036a72" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_205" data-type="image" style="opacity: 0; z-index: 888;">
        <img data-image-focal-point="0.5,0.5" data-image-dimensions="1024x771" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fee4b0dd27d7036a72/1444821531252/06-BRANGELINAS_ORPHANAGE_HIRES_S-1024x771.jpg"
        data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fee4b0dd27d7036a72/1444821531252/06-BRANGELINAS_ORPHANAGE_HIRES_S-1024x771.jpg" class="slide-photo" style="font-size: 0px; top: 0px; left: 188px; width: 1060px; height: 799px; position: relative;"
        alt="Brangelinas at the Orphanage C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fee4b0dd27d7036a72/1444821531252/06-BRANGELINAS_ORPHANAGE_HIRES_S-1024x771.jpg?format=2500w"
        data-image-resolution="2500w">
      </div>

      <div data-slide-url="ibzi4a7wff74lm3vdducwz4zyp1c7w" data-slide-id="544d3901e4b013df5bcd17be" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_207" data-type="image" style="opacity: 0; z-index: 888;">
        <img data-image-focal-point="0.5,0.5" data-image-dimensions="682x1024" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3901e4b013df5bcd17be/1444821567803/08-083-Marilyn-Back%2BJFK-682x1024.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3901e4b013df5bcd17be/1444821567803/08-083-Marilyn-Back%2BJFK-682x1024.jpg"
        class="slide-photo" style="font-size: 0px; top: 0px; left: 452px; width: 532px; height: 798px; position: relative;" alt="Marilyn and JFK C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3901e4b013df5bcd17be/1444821567803/08-083-Marilyn-Back%2BJFK-682x1024.jpg?format=1500w"
        data-image-resolution="1500w">
      </div>

      <div data-slide-url="46f2v80gmwzuxhsvuiqte3a1g87gl0" data-slide-id="544d3901e4b04e8632c63118" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_209" data-type="image" style="opacity: 0; z-index: 888;">
        <img data-image-focal-point="0.5,0.5" data-image-dimensions="1024x682" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3901e4b04e8632c63118/1444822864869/09_MG_4915_KANYE_BABY_HEADPHONES_MRes-1024x682.jpg"
        data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3901e4b04e8632c63118/1444822864869/09_MG_4915_KANYE_BABY_HEADPHONES_MRes-1024x682.jpg" class="slide-photo" style="font-size: 0px; top: 0px; left: 119px; width: 1199px; height: 798px; position: relative;"
        alt="Kanye and his Baby C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3901e4b04e8632c63118/1444822864869/09_MG_4915_KANYE_BABY_HEADPHONES_MRes-1024x682.jpg?format=2500w"
        data-image-resolution="2500w">
      </div>

      <div data-slide-url="y9nvmit9z4fyq553moepomk3dub6ka" data-slide-id="544d3904e4b04e8632c6311a" class="slide sqs-gallery-design-stacked-slide loaded sqs-active-slide" id="yui_3_17_2_1_1444864321837_211" data-type="image" style="opacity: 1; z-index: 889;">
        <img data-image-focal-point="0.5,0.5" data-image-dimensions="840x571" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3904e4b04e8632c6311a/1444821696436/10-JACKPOOL-1024x681.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3904e4b04e8632c6311a/1444821696436/10-JACKPOOL-1024x681.jpg"
        class="slide-photo" style="font-size: 0px; top: 0px; left: 131px; width: 1174px; height: 798px; position: relative;" alt="Jack Nicholson in the Pool C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3904e4b04e8632c6311a/1444821696436/10-JACKPOOL-1024x681.jpg?format=2500w"
        data-image-resolution="2500w" id="yui_3_17_2_1_1444864321837_497">
      </div>

      <div data-slide-url="0xc0wmfensimmqyqhriwr7f78fh972" data-slide-id="561e3db7e4b0111ed6127992" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_213" data-type="image" style="opacity: 0; z-index: 888;">
        <img data-image-focal-point="0.5,0.5" data-image-dimensions="1000x782" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e3db7e4b0111ed6127992/1444823271267/marilyn-undressing-for-jfk.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e3db7e4b0111ed6127992/1444823271267/marilyn-undressing-for-jfk.jpg"
        class="slide-photo" style="font-size: 0px; top: 0px; left: 208px; width: 1021px; height: 798px; position: relative;" alt="Marilyn Undressing for JFK C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e3db7e4b0111ed6127992/1444823271267/marilyn-undressing-for-jfk.jpg?format=2500w"
        data-image-resolution="2500w">
      </div>

      <div data-slide-url="xemwpiezb8gnz59ozhblaal2yg8q5z" data-slide-id="561e3dc8e4b0111ed61279d1" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_215" data-type="image" style="opacity: 0; z-index: 888;">
        <img data-image-focal-point="0.5,0.5" data-image-dimensions="3179x4308" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e3dc8e4b0111ed61279d1/1444823271253/7+-+36+-+Breasts+-+Sepia_LoRes.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e3dc8e4b0111ed61279d1/1444823271253/7+-+36+-+Breasts+-+Sepia_LoRes.jpg"
        class="slide-photo" style="font-size: 0px; top: 0px; left: 424px; width: 589px; height: 798px; position: relative;" alt="Marilyn Undressing C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e3dc8e4b0111ed61279d1/1444823271253/7+-+36+-+Breasts+-+Sepia_LoRes.jpg?format=2500w"
        data-image-resolution="2500w">
      </div>

      <div data-slide-url="hxzcjn2dokmsl5m8q3p547s03n74xa" data-slide-id="561e3ebce4b006d31181e84c" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_217" data-type="image" style="opacity: 0; z-index: 888;">
        <img data-image-focal-point="0.5,0.5" data-image-dimensions="2772x1845" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e3ebce4b006d31181e84c/1444823270781/Elton-colonic.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e3ebce4b006d31181e84c/1444823270781/Elton-colonic.jpg"
        class="slide-photo" style="font-size: 0px; top: 0px; left: 119px; width: 1199px; height: 798px; position: relative;" alt="Elton has Colonic C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e3ebce4b006d31181e84c/1444823270781/Elton-colonic.jpg?format=2500w"
        data-image-resolution="2500w">
      </div>

      <div data-slide-url="fz6fd3xi34im798puf0fvjn1z0yvgw" data-slide-id="54c2306ae4b0fe251ef9410a" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_219" data-type="image" style="opacity: 0; z-index: 888;">
        <img data-image-focal-point="0.5,0.5" data-image-dimensions="683x1024" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/54c2306ae4b0fe251ef9410a/1444823270830/0Yz1Ak7xMMlEzJ4H6bkvw74ISAYeFtGJYJv8D8nsdfY.jpeg"
        data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/54c2306ae4b0fe251ef9410a/1444823270830/0Yz1Ak7xMMlEzJ4H6bkvw74ISAYeFtGJYJv8D8nsdfY.jpeg" class="slide-photo" style="font-size: 0px; top: 0px; left: 452px; width: 533px; height: 798px; position: relative;"
        alt="Queen at William Hill C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/54c2306ae4b0fe251ef9410a/1444823270830/0Yz1Ak7xMMlEzJ4H6bkvw74ISAYeFtGJYJv8D8nsdfY.jpeg?format=1500w"
        data-image-resolution="1500w">
      </div>

      <div data-slide-url="y4d6tul9hptqw68l7rbh871qrq0uun" data-slide-id="54c230b9e4b07b213a484c9c" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_221" data-type="image" style="opacity: 0; z-index: 888;">
        <img data-image-focal-point="0.5,0.5" data-image-dimensions="1000x667" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/54c230b9e4b07b213a484c9c/1444823271255/Wills_Kate_Baby_Bath_Helicopter.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/54c230b9e4b07b213a484c9c/1444823271255/Wills_Kate_Baby_Bath_Helicopter.jpg"
        class="slide-photo" style="font-size: 0px; top: 0px; left: 120px; width: 1197px; height: 798px; position: relative;" alt="Wills, Kate and the Baby in the Bath C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/54c230b9e4b07b213a484c9c/1444823271255/Wills_Kate_Baby_Bath_Helicopter.jpg?format=2500w"
        data-image-resolution="2500w">
      </div>

      <div data-slide-url="2015/10/14/queen-tries-on-marigolds-c-type-archival-print" data-slide-id="561e4959e4b0f8015d9008e6" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_223" data-type="image" style="opacity: 0; z-index: 888;">
        <img data-image-focal-point="0.5,0.5" data-image-dimensions="400x600" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e4959e4b0f8015d9008e6/1444825475506/" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e4959e4b0f8015d9008e6/1444825475506/"
        class="slide-photo loaded" style="font-size: 0px; top: 0px; left: 452px; width: 532px; height: 798px; position: relative;" alt="Queen tries on Marigolds. C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e4959e4b0f8015d9008e6/1444825475506/?format=1500w"
        data-image-resolution="1500w">
      </div>

      <div data-slide-url="2015/10/14/diana-gives-the-finger-c-type-archival-print" data-slide-id="561e49e0e4b08862a349ef7b" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_225" data-type="image" style="opacity: 0; z-index: 888;">
        <img data-image-focal-point="0.5,0.5" data-image-dimensions="1280x953" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e49e0e4b08862a349ef7b/1444825980193/" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e49e0e4b08862a349ef7b/1444825980193/"
        class="slide-photo" style="font-size: 0px; top: 0px; left: 182px; width: 1072px; height: 798px; position: relative;" alt="Diana gives the finger. C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e49e0e4b08862a349ef7b/1444825980193/?format=2500w"
        data-image-resolution="2500w">
      </div>

    </div>
    <div class="gallery-controls">
      <span class="gallery-prev"><span>Prev</span></span><span class="gallery-divider"></span><span class="gallery-next"><span>Next</span></span>
    </div>
  </div>



  <!-- <div id="simpleControls">
      <span class="wrapper"><span class="control prev-slide">prev</span> / <span class="control next-slide">next</span></span>
  </div> -->



</div>

3 个答案:

答案 0 :(得分：2)

您可以使用简单的JavaScript执行此操作：

＆＃13;
＆＃13; 
var img = document.getElementById("imgGoogle");
document.getElementById('divText').innerHTML = img.alt;
＆＃13; 
<img id="imgGoogle" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="This is Google's logo">
<div id="divText"></div>
＆＃13;
＆＃13;
＆＃13;

要使用jQuery执行此操作，您可以执行以下操作：

＆＃13;
＆＃13; 
var altText = ($("#imgGoogle").attr("alt"));
$('#divText').html(altText);
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img id="imgGoogle" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google's logo">
<div id="divText"></div>
＆＃13;
＆＃13;
＆＃13;

编辑：要回答您对多个图片的查询，可以使用jQuery执行此操作：

＆＃13;
＆＃13; 
$.each($(".imgGoogle"), function() {
    var altText = $(this).attr('alt');
    
    $(this).next().html(altText);
});
＆＃13; 
.divText {
    background-color: rgba(51, 51, 51, 0.81);
    color: #fff;
    padding: 5px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img class="imgGoogle" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google's logo">
<div class="divText"></div>
    <br>
<img class="imgGoogle" src="http://72gpf1za5iq428ekh3r7qjc1.wpengine.netdna-cdn.com/wp-content/uploads/2015/02/google.png" alt="Google's logo 2">
<div class="divText"></div>
    <br>
<img class="imgGoogle" src="http://www.google.com/logos/2011/ausday11-hp.jpg" alt="Google's logo 3">
<div class="divText"></div>
    <br>
<img class="imgGoogle" src="http://searchengineland.com/figz/wp-content/seloads/2014/08/google-algorithm-fade-ss-1920-800x450.jpg" alt="Google's logo 4">
<div class="divText"></div>
＆＃13;
＆＃13;
＆＃13;

编辑：要回答您提供的输出html：

＆＃13;
＆＃13; 
$.each($(".slide-photo"), function() {
    var newDiv = document.createElement("div");
    var altText = $(this).attr('alt');
    $(newDiv).html(altText);
    $(newDiv).attr('class','divAltText');
    $(this).after(newDiv);
});
＆＃13; 
div.slide {
    box-shadow: 2px 2px 5px 3px #888;
    border-radius: 6px;
    margin: 20px auto;
    max-width: 100%;
    padding: 10px 0px;
    text-align: center;
    width:100%;
}

div.slide img {
    max-width: 85%;
    width:100%;
    margin: 0 auto;
}

.divAltText {
    display: inline-block;
    background-color: rgba(51, 51, 51, 0.81);
    color: #fff;
    padding: 5px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="galleryWrapper">
    <div id="slideshowWrapper">
        <div id="slideshow" class="sqs-gallery-design-stacked">
            <div data-slide-url="xhpxqx84l4s2dz1sxvz24un4h9bt5h" data-slide-id="544d38fbe4b0dd27d7036a64" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_199" data-type="image" >
                <img data-image-focal-point="0.5,0.5" data-image-dimensions="552x666" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fbe4b0dd27d7036a64/1444823277877/03-OBAMA_SMOKING_XMAS_231012_HiRes-1024x682.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fbe4b0dd27d7036a64/1444823277877/03-OBAMA_SMOKING_XMAS_231012_HiRes-1024x682.jpg" class="slide-photo"  alt="Obama Smoking 2012. C Type Archival Print" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" data-image-resolution="1500w">
            </div>
            <div data-slide-url="wte8thrzcfhfe00unh2q75vtzj7n0i" data-slide-id="544d38fce4b0dd27d7036a66" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_201" data-type="image" >
                <img data-image-focal-point="0.5,0.5" data-image-dimensions="1024x690" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fce4b0dd27d7036a66/1444826067827/04-2002_Marilyn_wank_window_bars-1024x690.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fce4b0dd27d7036a66/1444826067827/04-2002_Marilyn_wank_window_bars-1024x690.jpg" class="slide-photo" alt="Marilyn Reclining C Type Archival Print" src="http://72gpf1za5iq428ekh3r7qjc1.wpengine.netdna-cdn.com/wp-content/uploads/2015/02/google.png" data-image-resolution="2500w">
            </div>
            <div data-slide-url="fl83poim6cqov9t6i4qpg30jp7galt" data-slide-id="544d38fee4b0dd27d7036a70" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_203" data-type="image" >
                <img data-image-focal-point="0.5,0.5" data-image-dimensions="682x1024" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fee4b0dd27d7036a70/1444821495137/05-2824_001-Queen-on-looHR-682x1024.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fee4b0dd27d7036a70/1444821495137/05-2824_001-Queen-on-looHR-682x1024.jpg" class="slide-photo"  alt="Queen on the Loo C Type Archival Print" src="http://www.google.com/logos/2011/ausday11-hp.jpg" data-image-resolution="1500w">
            </div>
            <div data-slide-url="2zrbx5dnwpzuczi0vx7ewgeqa7nhbn" data-slide-id="544d38fee4b0dd27d7036a72" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_205" data-type="image" >
                <img data-image-focal-point="0.5,0.5" data-image-dimensions="1024x771" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fee4b0dd27d7036a72/1444821531252/06-BRANGELINAS_ORPHANAGE_HIRES_S-1024x771.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fee4b0dd27d7036a72/1444821531252/06-BRANGELINAS_ORPHANAGE_HIRES_S-1024x771.jpg" class="slide-photo" alt="Brangelinas at the Orphanage C Type Archival Print" src="http://searchengineland.com/figz/wp-content/seloads/2014/08/google-algorithm-fade-ss-1920-800x450.jpg" data-image-resolution="2500w">
            </div>
            <div data-slide-url="ibzi4a7wff74lm3vdducwz4zyp1c7w" data-slide-id="544d3901e4b013df5bcd17be" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_207" data-type="image" >
                <img data-image-focal-point="0.5,0.5" data-image-dimensions="682x1024" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3901e4b013df5bcd17be/1444821567803/08-083-Marilyn-Back%2BJFK-682x1024.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3901e4b013df5bcd17be/1444821567803/08-083-Marilyn-Back%2BJFK-682x1024.jpg" class="slide-photo"  alt="Marilyn and JFK C Type Archival Print" src="http://core0.staticworld.net/images/article/2014/09/google_tunnel-100432147-primary.idge.jpg" data-image-resolution="1500w">
            </div>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助!!!

答案 1 :(得分：1)

您可以执行以下操作：

var myphotoCaption = $( "#photoid" ).attr( "alt");
$('.altHolder').append(myphotoCaption)

<img src="test.gif" alt="test gif"/>
<div class="altHolder"></div>

答案 2 :(得分：0)

如果没有看到您的某些代码，很难完全解决您的问题，但我可以向您展示一些关于获取<img>元素列表并根据{{ {1}}这些图片的属性。

<强> TL; DR

普通JavaScript

我过去曾经使用过jQuery来做这类事情，但我想知道是否可以使用纯JavaScript。我不知道你的确切设置，但我设想了一个包含图像的图库，每个图像都由alt=""包裹着：

<div>

然后，通过简单的JavaScript，我们可以查看每个图片，并将<div id="gallery"> <div class="image"> <img src="https://c2.staticflickr.com/8/7685/16678214344_aef36b7a5a_n.jpg" alt="An illustration of two falcons"> </div> <div class="image"> <img src="https://c1.staticflickr.com/9/8635/16713817201_f5a828e2ed_n.jpg" alt="A hand-painted botanical print"> </div> <div class="image"> <img src="https://c2.staticflickr.com/4/3885/14953162645_5d99097f2b_n.jpg" alt="An engraved plate of Jesus College"> </div> </div> 属性的内容放入alt元素中：

首先，找到我们的图库容器，以及其中的图像容器列表：

<span>

循环浏览图片容器，找到var gallery = document.getElementById('gallery'); var imageContainers = gallery.getElementsByClassName('image-container'); 属性，为他们创建alt元素，将<span>内容放入alt你的内容中。已创建，最后将<span>插入图像容器中，并与每个图像一起：

<span>

在https://jsfiddle.net/hcp77o1a/3/查看小提琴，了解相关信息。

<强>的jQuery

使用相同的HTML模板，这个jQuery将执行相同的工作：

for (var i = 0; i < imageContainers.length; i++) {
    // Find the image in each container:
    var image = imageContainers[i].getElementsByTagName('img')[0];

    // Create a span element - we'll use this to house our caption:
    var caption = document.createElement('span');

    // Stick the alt tag from the image we found above into the caption <span>:
    caption.innerHTML = image.alt;

    // Insert the caption <span> into the image container:
    imageContainers[i].appendChild(caption);
}

在以下小提琴中采取行动：https://jsfiddle.net/hcp77o1a/4/

希望有所帮助 - 如果没有，请告诉我！

相关问题
最新问题