放<img>带有 JavaScript 的 alt 标签

Question

I know how to set an ALT tag on an <img> if I have the class or globally to all the images on the page, however how can I do it to a specific image that doesn't have an id or class? Can I use the parent DIV somehow to reference the image and add an alt tag?

<div id="table_processing">
    <img src="processing_report.gif"> Loading Report List...
</div>

Answer 1

I'd recommend using document.querySelector() , which allows you to select the image using CSS (jQuery-like) selectors.

Like this:

var image = document.querySelector("#table_processing img");

and then you can set the alt attribute with:

image.alt = "Our New Alt Text";

or

image.setAttribute("alt", "our New Alt Text");

Here's a demo:

 var image = document.querySelector("#table_processing img"); image.alt = "Our New Alt Text";

 <div id="table_processing"> <img src="http://via.placeholder.com/350x150"> Loading Report List... </div>

Answer 2

if you use jQuery, you could use the ID from the parent element like this:

$('#table_processing img').attr('alt', 'your text here');

This "css selector" will get all images inside the div with the id "table_processing" and sets the alt tag.

Answer 3

Pure/True/Real/Faster JavaScript Solution:

function setAlt()
{
    var div = document.querySelector("#table-processing");
        var image = div.querySelector("img");
            image.setAttribute("alt", "something");
}

Answer 4

JQuery 允许您使用有效的 css 选择器，因此您可以使用它：

$('#table_processing img').attr('alt', <text>);

Answer 5

I hate to keep plugging jQuery, but here is a very good example of automating missing alt tags with generic info, this is something I do to patch for WCAG AA compliance until we can edit all the content.

$("img:not([alt])").attr({ alt: "your alt text", role: "presentation" });
$("iframe:not([title])").attr({ title: "your iframe title" });

This looks for images without alt attributes, adds it and adds the value "your alt text here" along with a role for screen readers, but you can remove that. IO. also do the same for iframes and embeds that may be third parties that are out of compliance.