自动将“alt”属性添加到页面上的每个图像答案

【问题标题】：Automatically adding the 'alt' attribute to every image on a page自动将“alt”属性添加到页面上的每个图像
【发布时间】：2011-04-27 07:33:36
【问题描述】：

我需要将alt 属性添加到我每个网页上的每个图像。问题是其中一些网页上有数百张图片。

谁能建议一种使用 JavaScript 或 jQuery 的方法，对于页面上的每个图像，将图像的名称（减去扩展名）复制到新的 alt 属性？

之前：

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

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

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

【问题讨论】：

标签： javascript jquery html image alt

【解决方案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 属性不是 already exist，您可以先询问：

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

【讨论】：

感谢您的建议，如何粘贴一些HTML代码并单击按钮运行此脚本，最终输出脚本？像这样tools.arantius.com/tabifier
这将在页面加载时运行。如果您想将其更改为单击按钮运行，请将$(document).ready(function() { 替换为$('#buttonId').bind('click', function() {（将#buttonId 替换为正确的选择器）
我不想每次用户浏览这个页面时都运行这个脚本，那么我可以获取这个更新的源代码并将其粘贴到页面上吗？
你需要使用类似这样的解决方案：stackoverflow.com/questions/982717/…
我认为如果你为我们这些正在学习 javascript 或 jQuery 的人添加一个正在发生的事情的细分会很好。例如，我能够一直关注它，直到 filename.substring 部分。我认为重要的是人们能够真正学习和理解答案，而不仅仅是复制/粘贴它们，然后说，“好吧，它有效，很酷。不知道为什么，但它有效”。谢谢:)

【解决方案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()函数！

【讨论】：

但是，通过 JavaScript 在客户端添加 alt 并不能真正帮助您。一方面，谷歌不会看到它们。另一方面，像 lynx 这样的纯文本浏览器（最有可能需要 alt）不会看到它们。您只会在可访问性方面获得一点好处，但除非您有非常好的图像文件名，否则即使是这样也会失去。

【解决方案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>

【讨论】：