时间戳

首页 > 解决方案 > 如何使用 javascript 获取图像 alt 标签？

javascript - 如何使用 javascript 获取图像 alt 标签？

问题描述

我无法使用 javascript 获取图像 alt 标签。有可能吗？怎么做？

可能类似于：$caption.text(flkty.selectedElement).attr('alt')（最后一行 javascript）

但我不让它工作......

谢谢！

var $carousel = $('.carousel').flickity({
  imagesLoaded: true,
  percentPosition: false
});

var $caption = $('.caption');
// Flickity instance
var flkty = $carousel.data('flickity');

$carousel.on( 'select.flickity', function() {
  // set image caption using img's alt
  $caption.text( flkty.selectedElement.alt )
});
.carousel-cell {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.carousel-cell img {
  /* display: block; */
  /* max-height: 100%; */
  max-width: 100%;
}

p {
  text-align: center;
}
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

<div class="carousel">
  <div class="carousel-cell">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg"  alt="orange tree" />
  </div>
  <div class="carousel-cell">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" alt="submerged" />
   </div>
</div>
<p class="caption">&nbsp;</p>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

标签： javascripthtmlcssaltflickity

解决方案

利用attr

const img = document.getElementById('image')

const alt = img.getAttribute('alt')

console.log(alt)
<img id="image" src="https://picsum.photos/200/300" alt="this it the alt attribute" />

使用jQuery：

const alt = jQuery("#image").attr('alt')

console.log(alt)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="image" src="https://picsum.photos/200/300" alt="this it the alt attribute" />

您的代码中有一个小错误：

var $carousel = $('.carousel').flickity({
  imagesLoaded: true,
  percentPosition: false
});

var $caption = $('.caption');
// Flickity instance
var flkty = $carousel.data('flickity');

$carousel.on('select.flickity', function() {
  // set image caption using img's alt
  $caption.text($(flkty.selectedElement).find('img').attr('alt'))
});
.carousel-cell {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.carousel-cell img {
  max-width: 100%;
}

p {
  text-align: center;
}
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

<div class="carousel">
  <div class="carousel-cell">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" alt="orange tree" />
  </div>
  <div class="carousel-cell">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" alt="submerged" />
  </div>
</div>
<p class="caption">&nbsp;</p>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

推荐阅读