需要帮助，使用js将rel添加到img标签

Question

I need help with some JS. I need to add rel="lightbox" to the main images of the code below so that these images will open in a lightbox. I grabbed this code from the inspector and this is being generated by a plugin so instead of editing the plugin files I'd like to add the rel code another way. I assume I can add this via JS but nothing I am finding is working. Any help would be appreciated.

<div class="rsOverflow" style="width: 786px; height: 544px;">
    <div class="rsContainer">
        <div style="z-index:0;" class="rsSlide ">
            <div class="rsContent">
                <img class="rsImg rsMainSlideImage" src="http://166.62.38.87/~saphotonics/wp-content/uploads/2019/05/SA-62H_image1-1024x894.jpg" style="width: 555px; height: 484px; margin-left: 115px; margin-top: 30px;">
             </div>
        </div>
        <div style="z-index:0; display:none; opacity:0;" class="rsSlide ">
            <div class="rsContent">
                <img class="rsImg rsMainSlideImage" src="http://166.62.38.87/~saphotonics/wp-content/uploads/2019/05/SA-62H_image2-1008x1024.jpg" style="width: 477px; height: 484px; margin-left: 154px; margin-top: 30px;">
            </div>
        </div>
    </div>
    <div class="rsFullscreenBtn">
        <div class="rsFullscreenIcn"></div>
    </div>
</div>

Answer 1

You need to do something like this:

const imgs = document.querySelectorAll('img.rsImg')

for(let img of imgs){
  img.setAttribute('rel', 'lightbox');
}

The code is not tested, but I'm sure it'll guide you.

Answer 2

It looks like all of the images you want are tagged with the class "rsImg".
If this is the case, you can select all images with that class and add the "rel" attribute to them...

document.querySelectorAll('img.rsImg') // selects all "img" tags that have class "rsImg"
        .forEach(                      // for each of the things selected, run the code here
                 n => n.setAttribute('rel', 'lightbox')
                )

The following snippet runs that code, using your html from the question (with the images changed to placeholders) -- after it runs you can use your browser to inspect the element(s) and see that the rel attribute is added to each img .

 document.querySelectorAll('img.rsImg').forEach(n => n.setAttribute('rel', 'lightbox')) 

 <div class="rsOverflow" style="width: 786px; height: 544px;"> <div class="rsContainer"> <div style="z-index:0;" class="rsSlide "> <div class="rsContent"> <img class="rsImg rsMainSlideImage" src="//www.fillmurray.com/1024/894" style="width: 555px; height: 484px; margin-left: 115px; margin-top: 30px;"> </div> </div> <div style="z-index:0; display:none; opacity:0;" class="rsSlide "> <div class="rsContent"> <img class="rsImg rsMainSlideImage" src=" //www.fillmurray.com/1008/1024" style="width: 477px; height: 484px; margin-left: 154px; margin-top: 30px;"> </div> </div> </div> <div class="rsFullscreenBtn"> <div class="rsFullscreenIcn"></div> </div> </div>