やりたかったこと HTMLの文章構造を残しつつ 画像を多用するレスポンシブで 記述をなるべく少なく.data()を使ってうまいことできないか画策してた。 普段指定しているimgタグの属性って width, height, alt(, class, id)くらいだから 生成されるようにしてみた。 <!-- ターゲットのHTML --> <a class="img-text" data-file="ファイルパス" data-class="hoge-class">ここがaltになるよ</a> <h1 class="img-text" data-file="ファイルパス">ここがaltになるよ</h1> <!-- 生成するHTML --> <a class="img-text" data-file="ファイルパス" data-class="hoge-class"> <img src="ファイルパス
![レスポンシブHTMLをJS使って楽にコーディングしたかった。 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/4e42b6219220f4f6ef1cfd0ce35eff6cb57acfd4/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgzJUFDJUUzJTgyJUI5JUUzJTgzJTlEJUUzJTgzJUIzJUUzJTgyJUI3JUUzJTgzJTk2SFRNTCVFMyU4MiU5MkpTJUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJUE2JUU2JUE1JUJEJUUzJTgxJUFCJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg3JUUzJTgyJUEzJUUzJTgzJUIzJUUzJTgyJUIwJUUzJTgxJTk3JUUzJTgxJTlGJUUzJTgxJThCJUUzJTgxJUEzJUUzJTgxJTlGJUUzJTgwJTgyJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yMTIzZDQ5MTZlODg5NzE0MmI5YWRlNTA4ODI2N2JjMA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwR0VOWUEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTU1NThjZmUwOGNhMWE0NTJlNmJlNGFmZDZlZWNjYzM5%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D23f2c04ff5a82f10245d6662eba91c7c)