自动为页面上的每个图像添加“alt”属性

Question

我有一个需求，需要在每个网页的所有图像中添加 alt 属性。问题是某些网页上有数百张图像。

有人能否建议一种使用 JavaScript 或 jQuery 的方法，对于页面上的每个图像，将图像的名称（不包括扩展名）复制到新的 alt 属性中？

之前：

<img src="android.jpg width="100" height="50" />

在（不包括“.jpg”）之后：

<img src="android.jpg width="100" height="50" alt="android" />

- Charles Yeung

Answer 1

在jQuery中：

$(document).ready(function() {
  $('img').each(function(){
    var $img = $(this);
    var filename = $img.attr('src')
    $img.attr('alt', filename.substring(0, filename.lastIndexOf('.')));
  });
});

如果alt属性不存在，您可以添加以下内容进行询问：

var attr = $(this).attr('alt');
    if (typeof attr == typeof undefined || attr == false) {

- Mark Keats

---

谢谢您的建议，我该如何粘贴一些HTML代码并点击一个按钮来运行这个脚本，最终输出脚本呢？就像这个网站http://tools.arantius.com/tabifier。 - Charles Yeung

这段代码将在页面加载时运行。如果你想改为在按钮点击时运行，请用 $('#buttonId').bind('click', function() { 替换 $(document).ready(function() { （替换 #buttonId 为正确的选择器）。 - Mark Keats

我不想让用户每次浏览此页面时都运行此脚本，所以我能否获取更新后的源代码并将其粘贴到页面上？ - Charles Yeung

你需要使用类似这种解决方案：https://dev59.com/rXNA5IYBdhLWcg3wYMx-。 - Mark Keats

我认为如果您为那些正在学习JavaScript或jQuery的人添加一个发生情况的细分会很好。例如，我能够跟随所有步骤，直到filename.substring部分。我认为重要的是人们能够真正学习和理解答案，而不仅仅是复制/粘贴它们并说：“好的，它可以工作，很酷。不知道为什么，但它可以工作”。谢谢 :) - Soundfx4

Answer 2

这里是一种JavaScript方法：

function runScript() {
    for (i = 0; i < document.getElementsByTagName("img").length; i++) {
        document.getElementsByTagName("img")[i].setAttribute(
            "alt", document.getElementsByTagName("img")[i].src);
    }
}

页面加载后运行函数runScript()！

- Axe

---

然而，通过JavaScript在客户端添加alt并不能真正帮助你太多。首先，Google看不到它们。其次，像lynx这样的纯文本浏览器（最有可能需要alt的浏览器）也看不到它们。你只能在可访问性上获得一点点好处，但即使如此，除非你拥有非常好的图像文件名，否则也会失去这些好处。 - Amadan

Answer 3

这个脚本可以帮助您处理工作。它将在alt属性中附加图像的文件名。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>  
 <script type='text/javascript'>  
 //<![CDATA[  
 $(document).ready(function() {  
  $('img').each(function(){  
   var $img = $(this);  
   var filename = $img.attr('src')  
   $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));  
   $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));  
  });  
 });  
 //]]>  
 </script>

- Ahmed Wild