代码之家 › 专栏 › 技术社区 › Federico

在div中显示img ALT文本

alt addeventlistener javascript

Federico · 技术社区 · 6 年前

img alt 内部表演 div . 问题是它不会每次都更新 img 改变。

有什么不同吗 addEventListener 我可以使用它来改变屏幕上每个可见图像的alt值,而不需要点击?

var myImage = document.getElementsByTagName("img");
var text = document.getElementById("show");

for (var i = 0; i < myImage.length; i++) {
    myImage[i].addEventListener('click',show);
}

function show(){
    var myAlt = this.alt;
    text.innerHTML = myAlt;
}

提前谢谢。

1 回复 | 直到 6 年前

connexo 6 年前

为什么不在HTML准备好后就直接迭代图像呢?只需将一个侦听器附加到 DOMContentLoaded 事件:

document.addEventListener('DOMContentLoaded', () => {
  let images = [...document.querySelectorAll('img[alt]')]

  for (const image of images) {
    const altDiv = document.createElement('div')
    altDiv.textContent = image.getAttribute('alt')
    image.parentNode.appendChild(altDiv)
  }
})

<div>
  <img src="http://lorempixel.com/200/200/" alt="my beautiful alt text" />
</div>

<div>
  <img src="http://lorempixel.com/200/100/" alt="my beautiful alt text 2" />
</div>

如果要确保在显示alt文本之前加载图像,请在 load

document.addEventListener('DOMContentLoaded', () => {

  let images = [...document.querySelectorAll('img[alt]')]

  for (const image of images) {
    image.addEventListener('load', (e) => {
      const altDiv = document.createElement('div')
      altDiv.textContent = image.getAttribute('alt')
      image.parentNode.appendChild(altDiv)
    })
  }

})

<div>
  <img src="http://lorempixel.com/200/200/" alt="my beautiful alt text" />
</div>

<div>
  <img src="http://lorempixel.com/100/200/" alt="my beautiful alt text 2" />
</div>

<div>
  <img src="http://lorempixel.com/200/100/" alt="my beautiful alt text 3" />
</div>

推荐文章

aliezaheer · AddEventListener不适用于一个元素[重复]

2 年前

makerbaker · 取消选中框Javascript后重置输入值?

2 年前

Cain Nuke · 如何使事件侦听器在元素添加到DOM(纯js)后继续工作

2 年前

Bumboobee · 错误Uncaught TypeError:无法读取分离文件中null的属性(读取'addEventListener')

2 年前

aguywithquestions · 微调器加载动画页面加载后不会消失

3 年前

Abrar · Javascript颜色对比度查找器

3 年前

YannB · 如何为嵌套元素添加一个事件侦听器

6 年前

S16 · 使用普通JavaScript屏蔽名字和姓氏

6 年前

aman · 为什么要在脚本末尾执行Sourceopen事件侦听器?

6 年前

blake mcgarry · 如何使两个事件侦听器都工作

6 年前