https://www.icu.ac.jp/refurbishment-assets/js/ShowAltText.js

1export default class ShowAltText {
2  constructor(el) {
3    this.el = document.querySelector(el);
4    this.images;
5
6    this._init();
7  }
8
9  _init() {
10    if (!this.el) {
11      return;
12    }
13
14    this.images = this.el.querySelectorAll('img');
15
16    if (this.images.length > 0) {
17      [...this.images].forEach((img) => {
18        if (img.alt !== '') {
19          const imgInlineStyle = img.getAttribute('style');
20          const imgClassName = img.className;
21
22          img.removeAttribute('style');
23          const figure = document.createElement('figure');
24
25          if (imgInlineStyle) {
26            figure.setAttribute('style', imgInlineStyle);
27          }
28
29          if (imgClassName) {
30            figure.className = imgClassName;
31          }
32
33          img.before(figure);
34
35          figure.appendChild(img);
36          const figcaption = document.createElement('figcaption');
37          figcaption.textContent = img.alt;
38          figure.appendChild(figcaption);
39        }
40      });
41    }
42  }
43}