jquery - Set <img> alt tag with JavaScript - Stack Overflow

admin管理员组

文章数量:1340750

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>

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>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Dec 22, 2017 at 15:33 Andreas 21.9k77 gold badges5151 silver badges5858 bronze badges asked Dec 22, 2017 at 15:31 zemakerzemaker 18111 gold badge22 silver badges1515 bronze badges 5

• 1 Yes, you can. Check out how CSS selectors work, and you can apply that with querySelector to target your element – Sterling Archer Commented Dec 22, 2017 at 15:33
• You can use any CSS selector you want. – SLaks Commented Dec 22, 2017 at 15:33
• document.querySelector('img[src="processing_report.gif"]').setAttribute('alt', '<altText>'); – baao Commented Dec 22, 2017 at 15:35
• Element.querySelector(), ParentNode.children, ParentNode.firstElementChild – Andreas Commented Dec 22, 2017 at 15:35
• @baao handing out answers like that only enables these questions. :( – Sterling Archer Commented Dec 22, 2017 at 15:36

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

I'd remend 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./350x150"> Loading Report List...
</div>

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.

Pure/True/Real/Faster JavaScript Solution:

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

JQuery allows you to use valid css selector, so you can use this:

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

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 pliance 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 pliance.

本文标签： jquerySet ltimggt alt tag with JavaScriptStack Overflow